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属性中会包含一个代码，与键盘上一个特定的键对应。

document.onkeydown = function (ev) {
    console.log(ev.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。

document.onkeypress = function (ev) {
    if (ev.charCode){
         console.log(ev.charCode);
    } else {
         console.log(ev.keyCode);
    }
}

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

document.onkeypress = function (ev) {
    console.log(String.fromCharCode(ev.charCode));
}    
//按下a键之后显示‘a’,同时按下shift和a(即A)时，显示‘A’

keydown和keypress的区别

• KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母(注意：包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符。
  KeyDown 、KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)。
• KeyPress 只能捕获单个字符，KeyDown 和KeyUp 可以捕获组合键。
• KeyPress 可以捕获单个字符的大小写
• KeyDown、KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
• KeyPress 不区分小键盘和主键盘的数字字符。 KeyDown 、KeyUp 区分小键盘和主键盘的数字字符。
• 其中PrScrn 按键KeyPress、KeyDown、KeyUp 都不能捕获。

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”

textbox.addEventListener('textInput',function (event) {
    console.log(event);
    console.log(event.data);
},false);

textbox.addEventListener('keypress',function (event) {
    console.log(event);
    console.log(event.key);
},false)

可以自己试一下上边两段代码

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 之 事件(五)事件类型之鼠标事件 

JavaScript 之 事件(六)事件类型之滚轮事件