以前使用键盘事件,总要搜一下keycode键码对照表,最近前端换了个IDE,从sublime换成WebStorm,无意间发现keyCode方法已经弃用了,虽然现在还是可以使用的,但以后就说不准了
不用keyCode,但是发现有一个key方法
key方法的输出类型为string字符串
onkeydown = function (event) {
alert(typeof event.key) //输出string
}
按了几个键试了下输出
onkeydown = function (event) {
alert(event.key)
}
按键 | 输出 |
---|---|
字母a键 | a |
数字5键 | 5 |
f4键 | F4 |
回车键 | Enter |
空格键 | 一个空格 |
shift键 | Shift |
按住shift键后按数字5键 | 先Shift后$ |
大写锁定键 | CapsLock |
大写锁定键开启后按字母a键 | A |
上方向键 | ArrowUp |
下方向键 | ArrowDown |
左方向键 | ArrowLeft |
右方向键 | ArrowRight |
windows键 | Meta |
用event的key属性写一个简单的键盘事件:方向键控制小方块移动
为了省事,css就直接写在行内了
<div id="box" style="position: absolute;top: 100px;left: 100px;width: 20px;height: 20px;background: dodgerblue"></div>
window.onload = function(){
//通过id获取小方块
var box = document.getElementById('box')
//方向键控制小方块移动
onkeydown = function (event) {
if(event.key == 'ArrowUp')
box.style.top = (parseInt(box.style.top.slice(0,-2))-5).toString() + 'px'
else if(event.key == 'ArrowDown')
box.style.top = (parseInt(box.style.top.slice(0,-2))+5).toString() + 'px'
else if(event.key == 'ArrowLeft')
box.style.left = (parseInt(box.style.left.slice(0,-2))-5).toString() + 'px'
else if(event.key == 'ArrowRight')
box.style.left = (parseInt(box.style.left.slice(0,-2))+5).toString() + 'px'
}
}
用起来完全没问题,也很方便
最后,顺便说一下三种键盘事件的区别
- 按下任意键触发:onkeydown
- 按下任意字符键触发(除了shift、ctrl、f4等):onkeypress
- 释放按键触发:onkeyup
需要注意的是,对于onkeydown和onkeypress,键按住不放会重复触发事件
所以,对应三种键盘事件中event对象的key属性:
其中onkeydown和onkeyup事件的key属性可以返回任意按键的字符串,而onkeypress只能返回字符按键(除了shift、ctrl、f4等)的字符串