使用 JavaScript 在文本框中点击 Enter 按钮后触发 HTML 按钮

当用户在文本框中输入内容后，按下 Enter 按钮时，我们可以通过 JavaScript 来触发 HTML 按钮的点击事件。下面是实现这一功能的代码示例：

HTML 代码

首先，我们需要在 HTML 中定义一个输入文本框和一个按钮：

<input type="text" id="input-text" onkeydown="handleKeyDown(event)">
<button id="submit-btn" onclick="handleButtonClick()">点击按钮</button>

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现按下 Enter 按钮时触发按钮点击事件的功能：

function handleKeyDown(event) {
  if (event.keyCode === 13) { // 13 代表 Enter 键的 keyCode
    event.preventDefault(); // 阻止默认的输入行为，避免触发换行
    document.getElementById("submit-btn").click(); // 执行按钮的点击事件
  }
}

function handleButtonClick() {
  // 按钮点击事件的代码逻辑
  // 在这里可以处理用户点击按钮后的操作
}

代码解析

首先，我们定义了一个名为 handleKeyDown 的 JavaScript 函数，并通过 onkeydown 属性将它绑定到输入文本框上。当用户输入内容后按下键盘上的任意键时，该函数将被调用。

在 handleKeyDown 函数中，我们使用 if 语句检查按下的是不是 Enter 键，通过 event.keyCode 获取按键的 keyCode，并与 13 进行比较。如果相等，则执行下面的代码。

在此代码块中，我们使用 event.preventDefault() 阻止默认的输入行为，这样按下 Enter 键时就不会触发换行。

然后，我们使用 document.getElementById("submit-btn").click() 来触发按钮的点击事件。通过 getElementById 方法获取到按钮的元素，然后调用 click 方法模拟按钮的点击行为。

最后，我们定义了一个名为 handleButtonClick 的函数，用于处理按钮点击事件的代码逻辑。你可以在该函数中编写任意的 JavaScript 代码来处理用户点击按钮后的操作。

总结

通过以上的代码，当用户在文本框中输入内容后按下 Enter 按钮时，将会触发 HTML 按钮的点击事件。这种方法可以很方便地实现按下 Enter 键后触发指定按钮的功能，让用户体验更加友好。