原文： https://howtodoinjava.com/jquery/jquery-difference-between-keypress-and-keydown-events/

jQuery 支持 3 种类型的键盘事件，而我们是：

  1. keyup()：释放键盘上的某个键时会触发该事件。
  2. keydown()：按下键盘上的某个键时触发事件。
  3. keypress()：按下键盘上的某个键时会触发该事件。

根据以上定义，看起来keydown()和keypress()是同一回事。 但是，实际上它们并不完全相同。

让我们看看它们有何不同。

1）特殊键（例如CTRL或ALT或SHIFT）

如果您按下任何特殊键，浏览器将仅触发keydown()事件，而不触发keypress()事件。

尝试一下

尝试按一些常规键，然后按一些特殊键。

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  4. <script type="text/javascript">
  5. var keydownCounter = 0;
  6. var keypressCounter = 0;
  7. $( document ).ready(function(){
  9.     $('#textbox').keydown(function(event){
  10.         $('#keydownCounter').html(++keydownCounter);
  11.     });
  13.     $('#textbox').keypress(function(event){
  14.         $('#keypressCounter').html(++keypressCounter);
  15.     });
  17. });
  18. </script>
  19. </head>
  20. <body>
  21.     <h4>jQuery keydown() and keypress() difference</h4>
  23.     <label>TextBox : </label><input id="textbox" type="text" size="50" />
  25.     <div>
  26.         <label>keydown() event fired : </label><span id="keydownCounter">0</span> times.
  27.     </div>
  29.     <div>
  30.         <label>keypress() event fired : </label><span id="keypressCounter">0</span> times.
  31.     </div>
  32. </body>
  33. </html>

2）捕获键码或键 ascii 值

如果您打字母a和A（大写字母），则会发现以下事件行为。

  1. keydown()将显示a = 65，A = 65（不区分大小写）。
  2. keypresss()将显示a = 97，A = 65（区分大小写）。

如果要捕获实际字符键入，请始终使用keypress()事件。

试一试

尝试在[Caps Lock]打开的情况下按一些键，然后再将其关闭。

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  4. <script type="text/javascript">
  5. $( document ).ready(function(){
  7.     $('#textbox').keydown(function(event){
  8.         var keycode = (event.keyCode ? event.keyCode : event.which);
  9.         $('#keydownCode').html(keycode);
  10.     });
  12.     $('#textbox').keypress(function(event){
  13.         var keycode = (event.keyCode ? event.keyCode : event.which);
  14.         $('#keypressCode').html(keycode);
  15.     });
  17. });
  18. </script>
  19. </head>
  20. <body>
  21.     <h4>jQuery keydown() and keypress() difference</h4>
  23.     <label>TextBox : </label><input id="textbox" type="text" size="50" />
  25.     <div>
  26.         <label>keydown() detected keycode : </label><span id="keydownCode">0</span>.
  27.     </div>
  29.     <div>
  30.         <label>keypress() detected keycode : </label><span id="keypressCode">0</span>.
  31.     </div>
  32. </body>
  33. </html>

event.keyCode在 FireFox 中无法运行，但在 IE 中可以完美运行。 要在 Firefox 中获取event.keyCode，您应该改用event.which，jQuery 也会推荐它。 所以更好的方法应该是：

  1. var keycode =(event.keyCode? event.keyCode: event.which);

3）长按任意键

在这种情况下，根据文档，keydown()事件被触发一次，但是keypress()事件将一直触发直到释放键为止。 无论如何，这是浏览器特定的行为，我不会建议您使用此功能。 这应该仅限于您的知识。

试一试

按任意键并保持按下状态。

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  4. <script type="text/javascript">
  5. var keydownCounter = 0;
  6. var keypressCounter = 0;
  7. $( document ).ready(function(){
  9.     $('#textbox').keydown(function(event){
  10.         $('#keydownCounter').html(++keydownCounter);
  11.     });
  13.     $('#textbox').keypress(function(event){
  14.         $('#keypressCounter').html(++keypressCounter);
  15.     });
  17. });
  18. </script>
  19. </head>
  20. <body>
  21.     <h4>jQuery keydown() and keypress() difference</h4>
  23.     <label>TextBox : </label><input id="textbox" type="text" size="50" />
  25.     <div>
  26.         <label>keydown() event fired : </label><span id="keydownCounter">0</span> times.
  27.     </div>
  29.     <div>
  30.         <label>keypress() event fired : </label><span id="keypressCounter">0</span> times.
  31.     </div>
  32. </body>
  33. </html>

如果以上演示在您的浏览器中不起作用，请不要担心。 你不是一个人。 请参阅 http://unixpapa.com/js/key.html 中的 2.2 节（自动重复触发的事件）。

如果您有任何疑问或建议，请告诉我。

学习愉快！