jQuery键盘事件的应用【jQuery框架应用入门13】

刘金玉编程

发布于 2024-05-29 14:47:39

1070

发布于 2024-05-29 14:47:39

文章被收录于专栏：编程创造城市编程创造城市

通过前面12节教程的学习，我们已经可以利用jQuery基本操作dom节点，并且对jQuery事件也有了一定的入门。本节教程继续深化利用jQuery进行键盘事件的应用。

键盘按键事件主要分为键盘的按下过程和键盘的弹起过程。常见键盘事件如表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所示。