返回

jQuery 监听键盘事件：如何解决 ESC 键处理程序失效？

javascript

使用 jQuery 监听键盘事件：解决 ESC 键处理程序不起作用的问题

简介

在使用 jQuery 监听键盘事件时，我们希望在按下回车键和 ESC 键时分别执行不同的操作。然而，你可能会发现 ESC 键的事件处理程序不起作用。本文将深入探讨这个问题，并提供一个简单的解决方案。

问题：ESC 键处理程序不起作用

使用 jQuery 监听键盘事件时，我们使用 e.which 属性来获取按下键的密钥代码。如果我们将 e.which 与回车键的密钥代码（13）进行比较，则代码将按预期工作。但是，当我们使用 e.which == 27 检查 ESC 键时，事件处理程序不会触发。

密钥代码是什么？

密钥代码是键盘上特定键的数字表示。每个键都有一个唯一的密钥代码，当按下时，浏览器会触发一个包含该密钥代码的键盘事件。

ESC 键的密钥代码

ESC 键的密钥代码是 27 。因此，要检测 ESC 键被按下，我们需要将 e.which == 13 替换为 e.which == 27。

修改后的代码

$(document).keypress(function(e) { 
    if (e.which == 13) $('.save').click();   // enter (works as expected)
    if (e.which == 27) $('.cancel').click(); // esc (will work now)
});

其他键的密钥代码

以下是一些其他常用键的密钥代码：

  • 回车键：13
  • 退格键：8
  • Tab 键：9
  • Shift 键：16
  • Ctrl 键：17
  • Alt 键：18

有关键盘事件的完整密钥代码列表，请参阅 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

结论

通过将 ESC 键的密钥代码替换为正确的数字（27），我们成功解决了 ESC 键处理程序不起作用的问题。这使我们可以有效地区分回车键和 ESC 键的输入，并相应地执行预期的操作。

常见问题解答

1. 如何获取其他键的密钥代码？

你可以使用 MDN 文档中的表格或使用以下代码：

console.log(event.keyCode);

2. 为什么使用 e.which 而不是 event.keyCode？

在 jQuery 中，e.which 被认为是更可靠的密钥代码属性。它与不同浏览器的兼容性更好。

3. 如何检测同时按下多个键？

你可以使用 event.ctrlKey、event.shiftKey 和 event.altKey 属性来检测同时按下多个键。

4. 我还可以使用其他方法来监听键盘事件吗？

是的，你还可以使用 keydown 和 keyup 事件监听键盘事件。

5. jQuery 提供了哪些其他键盘事件？

jQuery 提供了以下键盘事件：

  • keydown
  • keypress
  • keyup