JS键盘事件(非常详细)

在JavaScript中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面3中类型:

keydown: 在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是Opera浏览器不支持这种连续操作。该事件处理函数返回false时，会取消默认的动作(如输入的键盘字符，在IE和Safari浏览器下还会禁止keypress事件响应).
keypress: 按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回false时，会取消默认的动作(如输入的键盘字符).
keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个连续的响应状态。

当获取用户正按下建码时，可以使用keydown、keypress和keyup事件获取这些信息。其中keydown和keypress事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用keypress事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。

示例

下面示例实时捕获键盘操作的各种细节，即键盘响应时间类型及对应的键值。

<textarea id="key"></textarea>
<script>var key=document.getElementById("key");key.onkeydown = f; //注册keydown事件处理函数key.onkeyup = f; //注册keyup事件处理函数key.onkeypress = f; //注册keypress事件处理函数function f (e) {var e = e || window.event; //标准化事件处理var s = e.type + " " + e.keyCode; //获取键盘事件类型和按下的值key.value = s;}
</script>

键盘事件属性

键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是ctrlKey和shiftKey属性除外，因为它们可以在水保事件中存在。例如，当按下Ctrl或Shift键时单击鼠标操作。

键盘事件定义的属性:

属性	说明
keyCode	该属性包含键盘中对应键位的键值
charCode	该属性包含键盘中对应键位的Unicode编码，仅DOM支持
target	发生事件的节点(包含元素),仅DOM支持
srcElement	发生事件的元素，仅IE支持
shiftKey	是否按下Shift键，如果按下返回true，否则为false
ctrlKey	是否按下Ctrl键，如果按下返回true，否则为false
altKey	是否按下Alt键，如果按下返回true，否则为false
metaKey	是否按下Meta键，如果按下返回true，否则为false，仅DOM支持

示例1

ctrlKey和shiftKey属性可存在于键盘和鼠标事件中，表示键盘上的Ctrl和Shift键是否被按住。下面示例能够检测Ctrl和Shift键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，则会把该元素从页面中删除。

document.onclick = function (e) {var e = e || window.event; //标准化事件对象var t = e.target || e.srcElement; //获取发生事件的元素，兼容IE和DOMif (e.ctrlKey && e.shiftKey) { //如果同时按下Ctrl和Shift键t.parentNode.removeChild(t); //移除当前元素}
}

keyCode和charCode属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的，如下表所示。读取可以根据需要有针对性的选用事件响应类型和引用属性值。

keyCode和charCode属性值

属性	IE事件模型	DOM事件模型
keyCode(keypress)	返回所有字符键的正确值，区分大写状态(65-90)和小写状态(97-122)	功能键返回正确值，而Shift、Ctrl、Alt、PrintScreen、ScrollLock无返回值，其他所有键值都返回0
keyCode(keydown)	返回所有键值(除PrintScreen键),字母键都以大写状态显示键值(65~90)	返回所有键值(除PrintScreen键),字母键都以大写状态显示键值(65~90)
keyCode(keyup)	返回所有键值(除PrintScreen键),字母键都以大写状态显示键值(65~90)	返回所有键值(除PrintScreen键),字母键都以大写状态显示键值(65~90)
charCode(keypress)	不支持该属性	返回字符键，区分大写状态(65~90)和小写状态(97~122),Shift、Ctrl、Alt、PrintScreen、ScrollLock无返回值，其他所有键值都返回0
charCode(keydown)	不支持该属性	所有键值为0
charCode(keyup)	不支持该属性	所有键值为0

某些键的可用性不是很正确，如PageUp和Home键等。不过常用功能键和字符键都是比较稳定的，如下表所示。

键位和码值对照表

键位	码值	键位	码值
0~9(数字键)	48~57	A~Z(字母键)	65~90
Backspace(退格键)	8	Tab(制表键)	9
Enter(回车键)	13	Space(空格键)	32
Left arrow(左箭头键)	37	Top arrow(上箭头键)	38
Rigth arrow(右箭头键)	39	Down arrow(下箭头键)	40

示例2

下面示例演示了如何使用方向键控制页面元素的移动效果。

<div id="box"></div>
<script>var box = document.getElementById("box"); //获取页面元素的引用指针box.style.position = "absolute"; //色块绝对定位box.style.width = "20px"; //色块宽度box.style.height = "20px"; //色块高度box.style.backgroundColor = "red"; //色块背景document.onkeydown = keyDown;//在Document对象中注册keyDown事件处理函数function keyDown(event) { //方向键控制元素移动函数var event = event || window.event; //标准化事件对象switch (event.keyCode) { //获取当前按下键盘键的编码case 37:  //按下左箭头键，向左移动5个像素box.style.left = box.offsetLeft - 5 + "px";break;case 39: //按下右箭头键，向右移动5个像素box.style.left = box.offsetLeft + 5 + "px";break;case 38: //按下上箭头键，向上移动5个像素box.style.top = box.offsetTop - 5 + "px";break;case 40: //按下下箭头键，向下移动5个像素box.style.top = box.offsetTop + 5 + "px";break;}return false}
</script>

在上面示例中，首先获取页面元素，通过CSS脚本控制元素绝对定位、大小和背景色。然后在document对象上注册鼠标按下事件类型处理函数，在事件回调函数keyDown()中侦测当前按下的方向键，并决定定位元素在窗口中的位置。其中元素的offsetLeft和offsetTop属性可以存取它在页面中的位置。

键盘响应顺序

当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。

对于字符键来说，键盘事件的响应顺序: keydown -> keypress -> keyup。

对于非字符键(如功能键或特殊键)来说，键盘事件的相应顺序: keydown -> keyup。

如果按下字符键不放，则keydown和keypress事件将逐个持续发生，直至松开按键。

如果按下非字符键不放，则只有keydown事件持续发生，直至松开按键。

示例

下面设计一个简单示例，以获取键盘事件相应顺序。

<textarea id="text" cols="26" rows="16"></textarea>
<script>var n = 1; //定义编号变量var text = document.getElementById("text"); //获取文本区域的引用指针text.onkeydown = f;// 注册keydown事件处理函数text.onkeyup = f; //注册keyup事件处理函数text.onkeypress = f; //注册keypress事件处理函数function f(e) { //事件调用函数var e = e || window.event; //标准化事件对象text.value += (n++) + "=" + e.type +" (keyCode=" + e.keyCode + ")\n";//捕获事件响应信息}
</script>

演示效果如下:

当分别输入A、B、C时:

当分别输入Shift、Ctrl、Alt功能键时:

当连续按下字符A时:

当连续按下Shift键时:

JS键盘事件(非常详细)相关推荐

java怎么实现人物的行走,js键盘事件实现人物的行走
本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下描述: 小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果. 用到的图: 效果: 代码: Ti ...
Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
用JS键盘事件来移动图片
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡撰写时间:2022/4/18 小时候都玩过下水道修理工的游戏吧,那其实是一个很简单的小游戏,用简单的JS技术就可以实现,现在我来示范一下最简单 ...
js键盘事件中的键码对照表
JS中的键盘事件经常用到,收集了键盘事件对应的键码来分享下: keyCode 对应按键 8 BackSpace BackSpace 9 Tab Tab 12 Clear 13 Enter 16 S ...
JS键盘事件获取键盘码
JS中的键盘事件 keydown:在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作.该事件处理函数返回 false 时,会取消默认的动作(如输入 ...
JS键盘事件—onkeydown，onkeyup
键盘事件 onkeydown 按键被按下对于某个按键一直按着不放,则事件会一直触发当onkeydown连续触发式,第一次和第二次之间会有一个间隔时间,其他之后会非常的快这种设计是为了防止我们误操 ...
HTML DOM 事件 —— 键盘事件 JS键盘事件
键盘事件如果想实现快捷的页面操作,或者是一些前端的游戏,了解键盘事件很重要: onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松 ...
JS 键盘事件、触摸事件
一.键盘事件:指当用户在操作键盘的时候会自动被触发的事件 keydown:键盘按下时触发 keypress:键盘按下时触发功能键无法响应 keyup: 键盘抬起时触发注意: 1.keydown ke ...
[js] 键盘事件 keydown keypress
不是所有标签都可以直接绑定触发键盘事件只有可以获取焦点的标签可以直接绑定触发键盘事件可以获取焦点的常见标签: input select>option textarea button ...

JS键盘事件(非常详细)

键盘响应顺序

JS键盘事件(非常详细)相关推荐

最新文章

热门文章