十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

javascript中textInput事件应用方法介绍

百恒网络 2016-12-26 934

“DOM3级事件”规范中引入了一个新事件,名叫 textInput。根据规范,当用户在可编辑区域中 输入字符时,就会触发这个事件。这个用于替代 keypress 的 textInput 事件的行为稍有不同。区别 之一就是任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput 事件。区别之二是 textInput 事件只会在用户按下能够输入实际字符的键时才会被触发,而 keypress 事件则在按下那些能够影响文本显示的键时也会触发(例如退格键)。 
       由于 textInput 事件主要考虑的是字符,因此它的 event 对象中还包含一个 data 属性,这个属 性的值就是用户输入的字符(而非字符编码)。换句话说,用户在没有按上档键的情况下按下了 S 键, data 的值就是"s",而如果在按住上档键时按下该键,data 的值就是"S"。 
       南昌网站建设公司百恒网络前端开发工程师举一个使用 textInput 事件的例子,以便大家更好理解,代码如下: 
<!DOCTYPE html>
<html>
<head>
       <title>TextInput Event Example</title>
       <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<input type="text" id="myText" />
       <p>This example only works in browsers that support the <code>textInput</code> event.</p>
       <script type="text/javascript">
              var textbox = document.getElementById("myText");
                     EventUtil.addHandler(textbox, "textInput", function(event){
                     event = EventUtil.getEvent(event);
                     alert(event.data); 
       });
       </script>
</body>
</html>
在这个例子中,插入到文本框中的字符会通过一个警告框显示出来。 
       另外,event 对象上还有一个属性,叫 inputMethod,表示把文本输入到文本框中的方式。
       0,表示浏览器不确定是怎么输入的。
       1,表示是使用键盘输入的。
       2,表示文本是粘贴进来的。
       3,表示文本是拖放进来的。
       4,表示文本是使用 IME输入的。
       5,表示文本是通过在表单中选择某一项输入的。
       6,表示文本是通过手写输入的(比如使用手写笔)。
       7,表示文本是通过语音输入的。
       8,表示文本是通过几种方法组合输入的。
       9,表示文本是通过脚本输入的。
       使用这个属性可以确定文本是如何输入到控件中的,从而可以验证其有效性。支持 textInput 属 性的浏览器有 IE9+、Safari和 Chrome。只有 IE支持 inputMethod 属性。        
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×