JavaScript监听键盘事件如何实现 JavaScript监听键盘事件实现代码示例

JavaScript监听键盘事件如何实现？本篇文章小编给大家分享一下JavaScript监听键盘事件实现代码示例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

监听方式

键盘事件往往是全局监听，设监听的函数为keyboard()。

keyup事件类型。该类型触发条件为按键按下去并松开。

//长按并松开只触发一次

document.addEventListener('keyup', keyboard);

document.onkeyup = keyboard; //记得不要加括号！

keydown事件类型。该类型触发条件为按键按下去。

//长按可以触发多次

document.addEventListener('keydown', keyboard);

document.onkeydown = keyboard;

keypress事件类型。该类型触发条件为按键按下去且产生了字符。

//长按可以触发多次

//遇到'1'，'a'，回车等按键可以触发，但del键，向上键等则不会

document.addEventListener('keypress', keyboard);

document.onkeypress = keyboard;

需要注意的是：keypress的兼容性并不是很好，比如安卓系统就不支持，所以尽量避免使用。

onkey___ 和 addEventListener之间，最好选后者。

另外，如果keyboard不带参，则监听的事件是任何符合条件的按键，即只要你按了键盘，就会触发事件。

监听具体事件（即按了哪个键）

上文提到的keyboard函数是可以设形参的，且在调用的时候不需加实参。

function keyboard(eve) {

...

}

document.onkeyup = keyboard; //不需要加参数和括号

此时的eve便是键盘事件类型的变量，它有以下属性：

其中，不同的浏览器对keyCode和which的支持情况是不同的，下文会有关于提升兼容性的方法。

举个例子：

input:

a

output:

a

65

需要注意的是：key属性的兼容性并不高，最好是先获取Unicode码，再转成对应字符。

let x = eve.keyCode || eve.which;

let key = String.fromCharCode(x);

想知道某个按键的Unicode码，可以查手册，也可以在控制台中试验。