JavaScript监听键盘事件

Posted ttjb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript监听键盘事件相关的知识,希望对你有一定的参考价值。

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

监听方式

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

  1. keyup事件类型。该类型触发条件为按键按下去并松开
    //长按并松开只触发一次
    document.addEventListener(‘keyup‘, keyboard);
    document.onkeyup = keyboard;      //记得不要加括号!
    
  2. keydown事件类型。该类型触发条件为按键按下去。
    //长按可以触发多次
    document.addEventListener(‘keydown‘, keyboard);
    document.onkeydown = keyboard;
    
  3. 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的支持情况是不同的,下文会有关于提升兼容性的方法。

举个例子:

<p id="msg1"></p>
<p id="msg2"></p>

<script>
	function keyboard(eve) {
		msg1.textContent += eve.key;
		msg2.textContent += eve.keyCode || eve.which;
  		//该方法可以提升代码的兼容性
	}
	document.onkeyup = keyboard;
</script>
input:
a

output: 
a
65

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

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

想知道某个按键的Unicode码,可以查手册,也可以在控制台中试验。
简单点的可以用ASCII码来顶着 https://www.runoob.com/tags/html-ascii.html




以上是关于JavaScript监听键盘事件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript键盘鼠标监听功能

JavaScript键盘鼠标事件处理

javascript 监听键盘事件

javascript 监听键盘事件

javascript基础:事件

JavaScript----事件