javaScript事件（七）事件类型之键盘与文本事件

键盘事件如下：

• keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
• keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
• keyup：当用户释放键盘上的键时触发。

只有一个文本事件：textInput。textInput是对keypress的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。

解释：

当用户按下一个键盘上的字符键时，首先会触发keydown事件，然后紧跟着是keypress事件，最后会触发keyup事件。

keydown和kepress都是在文本框发生变化之前触发的，keyup事件则是在文本框已经发生变化之后触发的。

如果用户按下一个字符键不放，就会重复触发keydown和keypress事件，直到用户松开该键为止。

 

如果用户按下的是一个非字符键，那么首先会触发keydown事件，然后就是keyup事件。如果按住这个非字符键不放，那么就会一直重复触发keydown事件，直到用户松开这个键，此时会触发keyup事件。

1、键码

keydown和keyup事件发生时，evnet对象的keyCode属性中会包含一个代码，与键盘上一个特定的键对应。

var textbox=document.getElementById("myText");
EventUtil.addHandler(textbox,"keyup",function(event){
    event=EventUtil.getEvent(event);
    console.log(event.keyCode);
});   

兼容性：在Firefox和Opera中，按分号键时keyCode值为59，也就是ASCII中分号的编码；但IE和Safari返回186，即键盘中按键的键码。

2、字符编码

IE9，Firefox，Chrome和Safari的event对象支持charCode 属性，charCode只有发生keypress事件时才包含值，该值是按下那个键所代表字符的ASCII编码。

兼容性：

IE8及之前版本中Opera是在keyCode中保存字符的ASCII编码。

检查charCode属性是否可用，不可用则使用keyCode。

getCharCode:function(event){
    if(typeof event.charCode=="number"){//在不支持的浏览器中值是undefined
        return event.charCode;
    }else{
        return event.keyCode;
    }
}

在取得了字符编码之后，就可以使用String.fromCharCode()将其转换成实际的字符。

3、DOM3级变化

DOM3中键盘事件不再包含charCode，而是包含2个新属性：key和char。

key是为了取代keyCode新增的，它的值是一个字符串。按下字符键（比如"M")，key的值就是相应的文本字符"M"；按下非字符键时，key的值就是相应的键名（比如"Shift"或“Down”）。

char属性在按下字符键时行为与key相同，但在按下非字符键时值为null。

存在兼容性，不推荐用。

4、textInput事件（DOM3事件）

用户在可编辑区域中输入字符时，就会触发这个事件。

textInput用来代替keypress，二者区别：

• 任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑区域才能触发textInput事件。
• textInput事件只会在用户按下能够输入实际字符的键时才会触发，而keypress事件则在按下那些能够影响文本显示的键时也会触发（比如退格键）。

data属性

textInput事件主要考虑的是字符，因此它的event对象中还包含一个data属性，data值为用户输入的字符。

• 用户按下S键，data值就是“s”
• 用户按下上档键时按下S键，data值就是"S"

EventUtil.addHandler(textbox,"textInput",function(event){
    event=EventUtil.getEvent(event);
    console.log(event.data);
});   

inputMethod属性

另外，event对象上还有一个属性，叫inputMethod，表示文本输入到文本框中的方式。使用这个属性可以确定文本是如何输入到控件中，从而验证其有效性。

• 0，表示浏览器不确定是怎么输入的
• 1，表示是使用键盘输入的
• 2，表示文本是粘贴进来的
• 3，表示文本是拖放进来的
• 4，表示文本是使用IME输入的
• 5，表示文本是通过在表单中选择某一项输入的
• 6，表示文本是通过手写输入的（比如使用手写笔）
• 7，表示文本是通过语音输入的
• 8，表示文本是通过集中方法组合输入的
• 9，表示文本是通过脚本输入的

兼容性：支持textInput属性的浏览器有IE9+，Safari和Chrome，只有IE支持inputMethod属性。

扩展阅读： 

javaScript事件（一）事件流

javaScript事件（二）事件处理程序

javaScript事件（三）事件对象

javaScript事件（四）event的公共成员（属性和方法）

javaScript事件（五）事件类型之鼠标事件 

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/6558581.html有问题欢迎与我讨论，共同进步。