如何防止按 ENTER 按键提交 Web 表单？-js教程-PHP中文网

如何防止按 ENTER 按键提交 Web 表单？

Patricia Arquette

发布： 2024-11-17 21:02:02

原创

385 人浏览过

How to Prevent Web Form Submission on ENTER Keypress?

防止按 ENTER 键提交 Web 表单

设计基于 Web 的应用程序时，通常希望防止按 ENTER 键提交表单。这可以使用 JavaScript 来完成。

解决方案：

修订版 2012（内联处理程序）

定义一个函数 checkEnter 到处理 ENTER 按键：

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

登录后复制

分配将此处理程序发送到表单：

document.querySelector('form').onkeypress = checkEnter;

登录后复制

这将阻止在 ENTER 上提交除文本区域之外的所有元素。

修订 2024（事件委托）

使用事件委托实现更现代的方法：

document.addEventListener(`keypress`, handle);

function handle(evt) {
  const form = evt.target.closest(`#testForm`);
  if (form) {
    if (evt.target.dataset.enterForSubmit) {
      if (evt.key === `Enter`) {
        evt.preventDefault();
        return logClear(`won't submit "${evt.target.value}"`);
      }
      return true;
    }
  }
}

function logClear(...txt) {
  console.clear();
  console.log(...txt);
}

登录后复制

添加要在 ENTER 上提交的元素的 data-enter-for-submit 属性：

<input data-enter-for-submit="1" 
    placeholder="enter text, try using enter to submit">

登录后复制

以上是如何防止按 ENTER 按键提交 Web 表单？的详细内容。更多信息请关注PHP中文网其他相关文章！