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

本文介绍了如何使用 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);

代码解释：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

• 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 属性。

以上就是使用 HTML 和 JavaScript 在 Enter 键按下时调用函数的详细内容，更多请关注php中文网其它相关文章！