JavaScript | 触发 ENTER 键上的按钮

在 HTML 表单中，当用户在文本框中输入完成后，通常需要通过点击按钮或按下回车键来提交表单或触发其他操作。在 JavaScript 中，我们可以编写代码来自动触发按钮的点击事件，实现自动提交表单或其他操作的效果。本文将介绍如何使用 JavaScript 在用户按下回车键时触发按钮的点击事件。

监听回车键事件

首先，我们需要在输入框中监听回车键的按下事件。可以使用以下代码：

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
    // TODO: 在此处触发按钮点击事件
  }
});

上述代码使用了 addEventListener 方法来监听文档对象 document 上的键盘按下事件。在回调函数中，我们判断按下的键是否为回车键（keyCode 为 13），如果是，则执行相应的操作。

触发按钮点击事件

在按下回车键后，我们需要触发对应按钮的点击事件。可以使用以下代码：

document.getElementById('button-id').click();

上述代码使用了 getElementById 方法来获取按钮元素，然后调用 click 方法来触发按钮的点击事件。需要注意的是，需要替换 button-id 为按钮元素的 id 属性值。

完整代码示例

以下是一个完整的代码示例，演示了如何在用户按下回车键时触发按钮的点击事件：

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
    document.getElementById('button-id').click();
  }
});

需要替换 button-id 为实际的按钮 id 属性值。

总结

本文介绍了如何使用 JavaScript 在用户按下回车键时触发按钮的点击事件。需要监听回车键事件，然后触发对应按钮的点击事件。这种技巧可以解决在 HTML 表单中用户输入完成后需要点击按钮才能提交数据的问题，提高用户体验和表单提交的效率。