如何停止按 ENTER 按鍵提交表單？

防止按 ENTER 按鍵提交表單

在 Web 應用程式中，ENTER 鍵通常用於提交表單。然而，有時需要阻止表單在按 ENTER 按鍵時提交。以下是實現此目的的兩種方法：

方法 1：Onkeypress 處理程序

此方法使用表單上的 onkeypress 事件處理程序。透過建立一個函數來檢查按下的鍵是否為 ENTER（鍵碼 13）並僅在不是 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 進行事件委託

使用ES20xx 和事件委託的更現代方法涉及設定按鍵偵聽器在整個文件上。此方法檢查包含目標輸入的表單是否具有指示按 ENTER 按鍵應提交表單的特殊屬性。相關的 JavaScript 和 HTML 程式碼：

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

<form>

這兩種方法都可以有效防止表單在 ENTER 按鍵上提交，同時允許文字區域輸入（自然使用 ENTER 進行換行）正常運作。

以上是如何停止按 ENTER 按鍵提交表單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！