jQuery键盘事件的应用【jQuery框架应用入门13】
通过前面12节教程的学习，我们已经可以利用jQuery基本操作dom节点，并且对jQuery事件也有了一定的入门。本节教程继续深化利用jQuery进行键盘事件的应用。
键盘按键事件主要分为键盘的按下过程和键盘的弹起过程。常见键盘事件如表5-4所示。
表5-4键盘按键事件
通过如下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") }) }) </head>
<body> <div id="wraper"> <h1>请输入用户名！</h1> <div id="header">用户名：<input type="text" value="刘金玉"></div> </div> </body>
在这段代码中，利用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测试按下字母
总结现象得到，当开发人员要求获取键盘输入的按键大小写敏感或输入中文时，要特别注意对按键事件的筛选。
本课程的前置基础课程应该是《零基础JavaScript教程》，您可以到“编程创造城市”官网找到该课程的视频教程。
先修课程合集的学习地址：
https://bcczcs.com/ljyknowledge/courses/page/
如果您还没学习过网页的基础知识，建议学习这本web前端开发教材。它将带您从html、css、html5、css3、JavaScript、jQuery一步步基础知识做下来，让您有一个更加系统的学习。
联系作者：刘金玉
- 发表于:
- 原文链接：https://page.om.qq.com/page/OpYAYC7Fyz62IoKcsuZcZ2Ug0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
