Javascript 键盘事件

目录

1. 遇到的坑
   1. keyCode 属性
   2. keypress 事件
2. 总结
   1. keyboard event 属性
   2. JavaScript keyboard event keyCode
   3. 关于事件回调函数

JS 监听键盘事件

遇到的坑

keyCode 属性

keyboardEvent 的 keyCode 属性已经 Deprecated，新的浏览不一定会支持该属性。MDN 文档 建议使用 code 属性

这里有一个开源项目可以把 keyCode 转换为 code：

https://github.com/marijnh/w3c-keycode

https://www.npmjs.com/package/w3c-keycode

但是 keyCode 和 code 不是严格对应的，且不同浏览器，使用输入法等多种情况会影响 keyCode 的值。

keypress 事件

keypress 事件已经 Deprecated，新的浏览器不一定支持该事件。

keypress 事件一般是紧随 keydown 事件，但是 keypress 事件仅对可见字符有效，例如字母，数字，空格符号等，很多控制字符是不会触发该事件的。而且更重要的是，keypress 事件的 keycode 属性和 keyup，keydown 是不同的，它对应的是 ascii 码而不是键的编号。

总结

keyboard event 属性

demo:

<input>
<script>
let targetEvents = ['keydown', 'keyup','keypress']
let el = [];
targetEvents.forEach( function (s) {
		document.addEventListener(s, function (e){
		el.push(e)
		console.log(e.type, e.keyCode,e. charCode, e.key, e.code);
	});
});
</script>

code：IE 浏览器都不支持该属性，值是字符串，例如字母键：”KeyA”, “KeyB”, … “KeyZ”（一律是大写），数字键区分小键盘和和大键盘（小键盘：“Numpad4”， 大键盘：“Digit2”），ctrl shift 区分左右等等（ShiftRight， AltLeft 等），回车可以区分大键盘（Enter）和小键盘（NumpadEnter）。

key：对于可见字符就是该字符本身，控制字符则是这个字符的名称，例如 Enter （无法区分大键盘，小键盘），字母能体现大小写，

charCode

keyCode：整数值，主要是上面提到的 keypress 事件与其他两个事件的值含义不同，keypress 是 ASCII 码，keydown 和 keyup 是一套专门的编码。

JavaScript keyboard event keyCode

大键盘数字 0 ~ 9： 48 ~ 57

小键盘数字 0 ~ 9：96 ~ 105

字母 A - Z ： 65 ~ 90

空格：32

回车：13

F1 ~ F24：112 ~ 135

BackSpace： 8

Tab： 9

Caps Lock：20

左上右下：37 ~ 40

关于事件回调函数

IE 浏览器版本 9 以下只能通过 window.event 获取事件对象，而 firefox 在某些情况下不能通过 window.event 获取该对象。

但是如果仅支持 IE9 和以上就可以直接使用回到函数的第一个参数获取事件对象了。

https://www.jianshu.com/p/e8a6fad0f7bc