首页 >web前端 >js教程 >如何防止按下 Enter 键时提交表单并执行自定义 JavaScript?

如何防止按下 Enter 键时提交表单并执行自定义 JavaScript?

Susan Sarandon
Susan Sarandon原创
2024-12-04 15:11:10915浏览

How Can I Prevent Form Submission on Enter Key Press and Execute Custom JavaScript Instead?

防止按下 Enter 键时提交表单

当用户在表单中按 Enter 键时,默认行为是提交表单。但是,某些情况下需要阻止表单提交并执行自定义 JavaScript 函数。

要实现此目的,可以修改表单上的事件侦听器以处理 Enter 按键。实现方法如下:

document.querySelector("form").addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    // Prevent form submission
    e.preventDefault();

    // Call your JavaScript function
    customFunction();
  }
});

function customFunction() {
  // Your custom JavaScript function logic
}

在此示例中,通过在事件处理程序中调用 e.preventDefault() 来阻止表单提交。通过添加此条件并调用自定义函数,Enter 键会触发 customFunction(),而不是提交表单。

注意:

现代浏览器建议使用 e. key 而不是 e.keyCode。但是,为了与旧版浏览器兼容,可能需要同时使用两者。

以上是如何防止按下 Enter 键时提交表单并执行自定义 JavaScript?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn