如何防止按 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中文網其他相關文章！