如何用代码实现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便是键盘事件类型的变量,它有以下属性:

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

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

举个例子:

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:如何用代码实现JavaScript监听键盘事件-创新互联
分享路径:http://ybzwz.com/article/csshch.html