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

防止按 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中文网其他相关文章！