如何防止 Web 应用程序中按 ENTER 按键时提交不需要的表单？

防止按 ENTER 键提交 Web 表单

在基于 Web 的应用程序中，由 ENTER 键触发的无意的表单提交可能会很麻烦。本指南提供了防止此类不良行为的解决方案。

解决方案 1：自定义按键处理程序

可以为表单实现自定义按键处理程序，以拦截 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;

解决方案 2：使用现代 JavaScript 进行事件委托

可以采用使用事件委托的更现代方法来处理 ENTER 按下。此方法涉及捕获文档级别的事件并检查最接近的表单祖先。只有具有 data-enter-for-submit 属性的指定元素才会触发 ENTER 上的表单提交。

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;
    }
  }
}

附加说明

• 文本区域应以不同方式处理，因为在其中按 ENTER文本区域通常表示换行符。
• 提供的代码片段是可定制的，可以适应特定的应用程序需求。

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