使用 HTML 和 JavaScript 在 Enter 键按下时调用函数

在 Web 开发中，经常需要在用户按下 Enter 键时触发特定的操作，例如提交表单或执行搜索。本文将介绍两种使用 HTML 和 JavaScript 实现此功能的方法。

方法一：使用 JavaScript 的 submit 事件监听器

此方法利用 HTML 表单的 submit 事件，通过 JavaScript 监听该事件并在事件发生时执行自定义函数。

步骤 1：HTML 结构

立即学习“Java免费学习笔记（深入）”；

首先，需要将文本框和按钮包含在一个

<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 的

步骤 1：HTML 结构

立即学习“Java免费学习笔记（深入）”；

在

<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 函数将被调用。

注意事项

• 确保 元素的 type 属性设置为 “submit”，以便触发表单的 submit 事件。
• 如果使用 JavaScript 的 submit 事件监听器，务必使用 e.preventDefault() 阻止表单的默认提交行为，除非确实需要提交表单。
• 两种方法都依赖于
  元素。 如果没有
元素，则无法使用这些方法。