在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧。
监听方式
键盘事件往往是全局监听,设监听的函数为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的支持情况是不同的,下文会有关于提升兼容性的方法。
举个例子:
<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:
aoutput:
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 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
更新动态
- StockfischRecords老虎鱼卡帕与和谐二重唱《远航-遥距的小岛》SACD-ISO
- 古璇《粤听粤好听》柏菲音乐[WAV]
- 李祥庭-幽居(古琴独奏)[正版CD原抓WAV+CUE]
- 谭艳《再度重相逢HQ》头版限量编号[低速原抓WAV+CUE]
- 群星《人声典范-金嗓子 DSD》[WAV+CUE][524M]
- 群星《旅途欢歌》2CD[WAV+CUE][1.3G]
- BlackWings Audio《女神异闻录 夜幕魅影-OST1》[320K/MP3][113.76MB]
- 海来阿木《西楼情歌》开盘母带[低速原抓WAV+CUE]
- 陈百强.2003-完全陈百强5CD【华纳】【WAV+CUE】
- 群星.2012-顾听生辉·乐坛大宗师经典半世纪3CD【环球】【WAV+CUE】
- BlackWings Audio《女神异闻录 夜幕魅影-OST1》[FLAC/分轨][332.91MB]
- 群星《音你而来 第2期》[320K/MP3][72.1MB]
- 群星《音你而来 第2期》[FLAC/分轨][197.58MB]
- 群星-中国新民乐(笛子)-戏竹4CD(DSD)[雨林唱片]WAV+CUE
- JacobCollier《DjesseVol.2》(2019)Hi-Res96kHz_24bit