jQuery Event Keypress 指南：掌握键盘交互

2024-03-12 05:59:53

jQuery Event Keypress：掌握键码，解锁交互式体验

前言

键盘事件是 Web 开发中至关重要的交互方式，而 jQuery 的 keypress 事件为识别按下的键提供了强有力的工具。本文将深入探讨如何使用 keypress 事件来检测键码，并演示如何将其应用于现实世界中的场景，如在按下 Enter 键时提交表单。

识别键码：keyCode 与 which

keypress 事件的 keyCode 或 which 属性返回一个数字，表示按下的键的键码。一般来说，keyCode 返回键码，而 which 返回 Unicode 字符代码。对于某些按键（如 Enter 键），两个属性返回相同的值。

使用 keypress 事件检测键码

以下代码片段演示了如何使用 keypress 事件检测按下的键码：

$('#searchbox input').on('keypress', function(e) {
  const keyCode = e.keyCode || e.which;
  console.log(`Key pressed: ${keyCode}`);
});

触发 Enter 键提交

在许多情况下，我们需要在按下 Enter 键时触发特定动作，如提交表单。我们可以使用 keypress 事件并检查 keyCode 是否为 13（Enter 键的键码）来实现这一点：

$('#searchbox input').on('keypress', function(e) {
  const keyCode = e.keyCode || e.which;
  if (keyCode == 13) {
    $(this).closest('form').submit();
  }
});

优化事件处理

为了提高性能和代码可维护性，可以采用以下优化技巧：

事件委托： 将事件处理程序附加到父元素，而不是单个元素。
命名空间： 在事件处理程序名称中使用命名空间，以防止冲突。
现代 JavaScript 语法： 使用箭头函数和模板字符串简化代码。

完整示例

整合上述优化，完整的示例如下：

$('#searchbox input').on('keypress', (e) => {
  const keyCode = e.keyCode || e.which;
  if (keyCode == 13) {
    e.preventDefault();
    $(e.target).closest('form').submit();
  }
});