Javascript高级编程学习笔记（64）—— 事件（8）键盘与文本事件

键盘与文本事件

用户在使用键盘时会触发键盘事件

“DOM2级事件”最初规定了键盘事件，但是最后在定稿时又删除了相应内容

所以键盘事件被放入了DOM3级事件的规范中

总的来说有三个键盘事件：

keydown：当用户按下键盘上的任意键时触发，按住不放会重复触发
keypress：用户按下键盘上的字符键时触发，按住不放重复触发（按下ESC键也会触发）
keyup：用户释放按键触发

所有元素都支持上述三个事件，但只有用户通过文本文本框输入文本时比较常用

文本事件只有一个就是 textInput 事件

该事件是对keypress 的补充

其目的在于将文本显示给用户之前实现拦截，在文本插入文本框之前都会触发该事件

以上事件中 keydown 和 keypress 事件会在文本框发生变化之前触发

keyup则会在文本框变化之后触发，若按住键不放则会持续触发 keypress 和 keydown，直到用户释放按键时才触发 keyup

总的来说触发顺序如下：

keydown
keypress
textInput
文本改变
keyup

PS.键盘事件也支持修改键属性：shiftKey、ctrlKey、altKey、、metakey

键码

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

所有非字符键的键码如下表所示：

键	键码
退格（Backspace）	8
制表（Tab）	9
回车（Enter）	13
上档（Shift）	16
控制（Ctrl）	17
Alt	18
暂停/中断（Pause/break）	19
大写锁定（Caps Lock）	20
退出（ESC）	27
上翻页（Page Up）	33
下翻页（Page Down）	34
结尾（END）	35
开头（Home）	36
左箭头	37
上箭头	38
右箭头	39
下箭头	40
插入（Ins）	45
删除（Del）	46
左Window	91
右Window	92
上下文菜单	93
小键盘0	96
小键盘1	97
小键盘2	98
小键盘3	99
小键盘4	100
小键盘5	101
小键盘6	102
小键盘7	103
小键盘8	104
小键盘9	105
小键盘+	107
小键盘及大键盘—	109
小键盘.	110
小键盘/	111
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123
数字锁（Num Lock）	144
滚动锁（Scroll Lock）	145
分号（IE/Safari/Chrome）	186
分号（Opera/FF）	59
小于	188
大于	190
正斜杠	191
沉音符（`）	192
左方括号	219
反斜杠	220
右方括号	221
单引号	22
等于	61

字符编码

发生 keypress 事件意味着按下的键会影响到屏幕中的文本信息

在所有浏览器，按下能够插入或删除字符的键都会触发 keypress 事件

主流浏览器 keypress 事件的 event 对象都支持一个 charCode 属性

该属性只有发生 keypress 事件的时候才有值，这个值通常是按下键的 ASSCII 编码

此时的keyCode 通常等于零或者按键的键码

若需要跨浏览器获取字符编码可以使用以下的代码：

function getCharCode(event){
    if(typeof event.charCode ==="number"){
        return event.charCode;
    }else{
        return event.keyCode;
    }
}

DOM3级变化

我们知道 DOM2级事件主要是关于 addEventListener 等规范，DOM3级事件主要规范的则是键盘事件

尽管所有浏览器都实现了某种形式的键盘事件，DOM3级事件还是做出了一些改变：

DOM3级事件中的键盘事件将不再包含 charCode 属性，取而代之的时两个新属性：key 和 char

key：用于取代 keyCOde 而新增，其值为一个字符串。按下字符键时key的值为按键对应的字符，按下非字符按键其值则是键对应的名如（shift）

char：对于字符按键行为与 key 相同，非字符按键其值为null

此外DOM3级事件还添加了名为 location 的属性，是一个数值，表示按下了什么位置上的键

0：默认键盘

1：左侧

2：右侧

3：小键盘

4：移动设备键盘

5：手柄

最后还给 event 对象添加了 getModifierState（）方法

该方法接收一个参数，即 shift 、meta等修改键名的字符串，表示要检测的修改键，若调用该方法时修改键处于被按下的状态则返回 true 否则返回 false

textInput事件

该事件是 DOM3级规范引入的新事件，根据规范，当用户在可编辑区域输入字符时则会触发该事件

该事件与 keyPress 事件的区别在于，textInput 只有可编辑区域才能触发，而keypress 任何可以获得焦点的元素都能触发

由于textinput 事件主要考虑的是字符，因此他的event对象中还包含一个属性 data

该属性的值为用户输入的字符

此外 event 对象上还有一个属性叫做 inputMethod，表示文本输入到文本框中的方式

0：浏览器不确定的方式

1：键盘输入

2：粘贴

3：拖放

4：使用IME（输入法编辑器）输入

5：表单选择输入

6：手写输入

7：语音输入

8：组合输入

9：脚本输入