成都网站建设设计

将想法与焦点和您一起共享

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

这篇文章主要讲解了如何用代码实现JavaScript监听键盘事件,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

创新互联主营乌拉特前网站建设的网络公司,主营网站建设方案,重庆APP开发,乌拉特前h5小程序设计搭建,乌拉特前网站营销推广欢迎乌拉特前等地区企业咨询

在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧。

监听方式

键盘事件往往是全局监听,设监听的函数为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便是键盘事件类型的变量,它有以下属性:

属性意义
key事件对应按钮的字符
keyCode事件对应按钮的Unicode码
which事件对应按钮的Unicode码

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

举个例子:

input:
a

output:
a
65

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

let x = eve.keyCode || eve.which;
let key = String.fromCharCode(x);

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

看完上述内容,是不是对如何用代码实现JavaScript监听键盘事件有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。


分享标题:如何用代码实现JavaScript监听键盘事件
本文路径:http://chengdu.cdxwcx.cn/article/igjjec.html