概念

个人理解：

在浏览器中，当用户操作键盘是，会触发键盘事件，触发的键盘事件主要有3种：keydown、keypress、keyup。

keypress() 事件函数

说明：

当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

keypress事件不会触发所有的键，比如Alt、Ctrl、Shift、ESC等。
语法：

触发被选元素的 keypress 事件：

$(selector).keypress()

添加函数到 keypress 事件：

$(selector).keypress(function)

解释：

keypress()事件的参数是回调函数，当keypress事件触发时运行回调函数。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <script src="jquery.min.js"></script>
        <script>
            i=0;
            $(document).ready(function(){
              $("input").keypress(function(){
                $("span").text(i+=1);
              });
            });
        </script>
    </head>
    <body>
        输入你的名字: <input type="text">
        <p>按键的次数: <span>0</span></p>
    </body>
</html>

keydown() 事件函数

说明：

当键盘或按钮被按下时，发生 keydown 事件。如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

语法：

触发被选元素的 keydown 事件：

$(selector).keydown()

添加函数到 keydown 事件：

$(selector).keydown(function)

解释：

keydown()方法的参数是回调函数，当keydown事件触发时运行回调函数。在回调函数中，可以使用event.which属性判断哪个键被按下。一般keydown()与keyup()配合一起使用。

keyup() 事件函数

说明：

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

语法：

触发被选元素的 keyup 事件：

$(selector).keyup()

添加函数到 keyup 事件：

$(selector).keyup(function)

解释：

keyup()方法的参数是回调函数，当keyup事件触发时运行该回调函数。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <script src="jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("input").keydown(function(){
                $("input").css("background-color","yellow");
              });
              $("input").keyup(function(){
                $("input").css("background-color","pink");
              });
            });
        </script>
    </head>
    
    <body>
        输入你的名字: <input type="text">
        <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
    </body>
</html>

event.which 属性

说明：

我们在使用键盘事件时，有时需要知道哪个键被按下了，获取哪个键被按下可以使用event.which属性。当相应的事件触发，会执行其回调函数，可以把event作为回调函数的参数。

示例：

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.min.js"></script>
        <script>
            $(document).ready(function(){
              $("input").keyup(function(event){ 
                $("div").html("Key: " + event.which);
              });
            });
        </script>
    </head>
    
    <body>
        请输入: <input type="text">
        <div />
    </body>
</html>

上面代码中，获取输入框的值后，通过event.which属性可以知道用户输入了哪个键，event.which属性返回的是键盘码，我们可以可以使用event.keyCode属性获取键盘码。如果想要直接获取用户输入的内容，可以使用event.key属性，返回的是用户输入的字符串。

jQuery 键盘事件

概念

keypress() 事件函数

keydown() 事件函数

keyup() 事件函数

event.which 属性

相关文章