keypress, keydown, keyup的区别

最新推荐文章于 2023-06-27 14:16:52 发布

原创最新推荐文章于 2023-06-27 14:16:52 发布 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#事件 #keypress #keydown #keyup

收录于

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文详细解析了键盘事件的工作原理，包括keydown、keyup及keypress三个事件的区别与联系，并通过一个jQuery实例展示了不同事件触发的具体行为。

完整的key press 过程分为两个部分：1. 按键被按下（keydown）；2. 按键被松开(keyup)。

被按下时发生keydown事件，被松开时发生keyup事件。

keypress事件在被按下时就发生，但松开后才算一个完整的keypress事件。而对keydown事件，即使没有被松开，也可以算完整的keydown事件。

引用jqurey的一个例子：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
i=0;
$(document).ready(function(){
  $("input").keypress(function(){
    $("span").text(i+=1);
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
</body>
</html>

参考：http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_keypress_trigger

在输入框输入任意字符，当代码红色部分为

keypress：按下字符就会自动加一，但不会连续加，必须放开再按下才会再加一；

keydown：按下字符就会自动加一，且如果按着不放，会连续加；

keyup：放开后才加一。