键盘按键事件主要分为键盘的按下过程和键盘的弹起过程。常见键盘事件如表5-4所示。
表5-4键盘按键事件
键盘事件 | 说 明 |
---|---|
keydown | 当键盘按下时第一个发生的事件,对所有按键有效 |
keypress | 当键盘按下时第二个发生的事件,对中文和特殊按键无效 |
keyup | 当键盘弹起时发生的事件,对所有按键有效 |
通过如下html代码进行验证。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function() {
$(document).keydown(function() {
console.log("keydown")
})
$(document).keypress(function() {
console.log("keypress")
})
$(document).keyup(function() {
console.log("keyup")
})
})
</script>
</head>
<body>
<div id="wraper">
<h1>请输入用户名!</h1>
<div id="header">用户名:<input type="text" value="刘金玉"></div>
</div>
</body>
</html>
在这段代码中,利用jQuery对整个页面上下文分别做了三个键盘事件的绑定,先打开chrome浏览器的console窗体,然后在文本框中随意输入一个英文字母或数字时,就可以看到这个在三个键盘事件的执行顺序,如图5-14所示。
图5-14键盘按下效果
但是当输在文本框中输入中文时,发现keypress事件并没有被执行,如图5-15所示,只在console窗体中输出了keydown事件和keyup事件。
图5-15按下中文按键测试
在jQuery中,如果你要获取键盘输入的是什么按键,那么可以利用事件参数的which属性即可(event.which)。
现在在keydown和keypress事件中都增加一条代码console.log(event.which)用来在console窗体输出按键的结果,在输出前先保持大小写按键为小写字母模式,然后在文本框中输入小写字母a,此时在console窗体中的keydown事件中显示的却是大写字母A对应的ascii码值65,而在keypress事件中显示的是正确的小写字母a对应的ascii码97。如图5-16所示。
图5-16测试按下字母
总结现象得到,当开发人员要求获取键盘输入的按键大小写敏感或输入中文时,要特别注意对按键事件的筛选。