本文介绍了如何使用 HTML 和 JavaScript 在文本框中按下 Enter 键时触发特定函数。文章提供了两种实现方法：一种是使用 JavaScript 的 submit 事件监听器，另一种是直接在 HTML 的 <form> 标签中使用 onsubmit 属性。通过清晰的代码示例和解释，帮助开发者轻松实现该功能。
在 Web 开发中，经常需要在用户按下 Enter 键时触发特定的操作，例如提交表单或执行搜索。本文将介绍两种使用 HTML 和 JavaScript 实现此功能的方法。
方法一：使用 JavaScript 的 submit 事件监听器
此方法利用 HTML 表单的 submit 事件，通过 JavaScript 监听该事件并在事件发生时执行自定义函数。
步骤 1：HTML 结构
立即学习“Java免费学习笔记（深入）”；
首先，需要将文本框和按钮包含在一个 <form> 元素中。 重要的是将按钮的 type 属性设置为 "submit"。
<form id="submitForm">
<input type="text" placeholder="...">
<button type="submit">Enter</button>
</form>步骤 2：JavaScript 代码
接下来，使用 JavaScript 获取表单元素，并为其添加 submit 事件监听器。 在事件处理函数中，使用 e.preventDefault() 阻止表单的默认提交行为，然后执行所需的函数。
function newInput(e){
e.preventDefault();
alert('Function called');
}
// 获取表单元素
var form = document.getElementById("submitForm");
// 添加事件监听器
form.addEventListener("submit", newInput, true);代码解释：
- e.preventDefault()：阻止表单的默认提交行为，避免页面刷新或跳转。
- form.addEventListener("submit", newInput, true)：为表单添加 submit 事件监听器，当表单提交时，newInput 函数将被调用。 true 参数表示使用事件捕获。
方法二：使用 HTML 的 onsubmit 属性
此方法直接在 HTML 的 <form> 标签中使用 onsubmit 属性，指定当表单提交时要执行的 JavaScript 函数。
步骤 1：HTML 结构
立即学习“Java免费学习笔记（深入）”；
在 <form> 标签中添加 onsubmit 属性，并将其值设置为要执行的函数名。 同样，需要将按钮的 type 属性设置为 "submit"。
<form onsubmit="newInput()" id="submitForm">
<input type="text" placeholder="...">
<button type="submit">Enter</button>
</form>步骤 2：JavaScript 代码
定义 onsubmit 属性中指定的 JavaScript 函数。
function newInput(){
alert('Function called');
}代码解释：
- onsubmit="newInput()"：当表单提交时，newInput 函数将被调用。
注意事项
- 确保 <button> 元素的 type 属性设置为 "submit"，以便触发表单的 submit 事件。
- 如果使用 JavaScript 的 submit 事件监听器，务必使用 e.preventDefault() 阻止表单的默认提交行为，除非确实需要提交表单。
- 两种方法都依赖于 <form> 元素。 如果没有 <form> 元素，则无法使用这些方法。
总结
本文介绍了两种在 HTML 中通过按下 Enter 键调用 JavaScript 函数的方法。 使用 JavaScript 的 submit 事件监听器提供了更灵活的控制，而使用 HTML 的 onsubmit 属性则更加简洁。 选择哪种方法取决于具体的需求和个人偏好。 无论选择哪种方法，都应注意阻止表单的默认提交行为，并确保正确设置 <button> 元素的 type 属性。
