HTML 如何在按下回车键时触发onclick函数

在本文中，我们将介绍如何在按下回车键时触发onclick函数的方法。

阅读更多：HTML 教程

使用键盘事件监听器

在HTML中，可以使用键盘事件监听器来捕捉用户按下的键盘按键。当用户按下某个键时，我们可以执行相应的操作。针对回车键，我们可以通过监听keypress事件来实现相应的功能。

下面是一个示例代码，演示了如何使用键盘事件监听器来触发onclick函数：

<html>
<body>

<input type="text" id="myInput" onkeypress="myFunction(event)">

<script>
function myFunction(event) {
  if (event.keyCode === 13) {
    document.getElementById("myButton").click();
  }
}
</script>

<button onclick="alert('Hello World!')" id="myButton">Click Me</button>

</body>
</html>

在上面的示例中，我们在<input>标签上设置了一个onkeypress事件监听器，通过传递event对象给myFunction函数。在myFunction函数中，我们使用event.keyCode属性来获取用户按下的键码。如果键码为13，说明用户按下了回车键，我们就触发<button>标签上的onclick函数，从而实现在按下回车键时触发onclick函数的效果。

使用事件监听器

除了上面的示例外，还可以使用事件监听器来实现我们的目标。通过使用addEventListener方法，我们可以在指定的DOM元素上监听keypress事件，然后在回调函数中执行相应的操作。

下面是一个使用事件监听器的示例代码：

<html>
<body>

<input type="text" id="myInput">

<script>
document.getElementById("myInput").addEventListener("keypress", function(event) {
  if (event.keyCode === 13) {
    document.getElementById("myButton").click();
  }
});
</script>

<button onclick="alert('Hello World!')" id="myButton">Click Me</button>

</body>
</html>

在上述示例中，我们首先获取了<input>元素，并使用addEventListener方法添加了一个keypress事件监听器。在回调函数中，我们使用相同的逻辑来判断用户是否按下了回车键，并触发<button>元素上的onclick函数。