通過javascript提交HTML表單並防止默認

Question

我正在使用用 javascript 構建的虛擬鍵盤作為在嵌入式系統上運行的用戶界面。

虛擬鍵盤的源代碼可以在這里找到： https : //codepen.io/dcode-software/pen/KYYKxP

我只更改了源代碼中的一個部分。 Keyboard.js 文件第 141-151 行：

case "enter":
          keyElement.classList.add("keyboard__key--wide");
          keyElement.innerHTML = createIconHTML("Enter");

          keyElement.addEventListener("click", () => {
            this.properties.value += "\n";
            this._triggerEvent("oninput");
            /**
             * The part that i modified
             */
            document.querySelector("form").submit();
          });

          break;

基本上，我在這里嘗試做的是在虛擬鍵盤上按下“回車”鍵時提交當前頁面上的表單。 （哪個工作正常）

但我也想阻止這個提交事件的默認值。 ( e.preventDefault() ) 那么我該如何實現呢？ 謝謝你的幫助。

編輯：我已經將e.preventDefault()添加到提交函數中。 這是我處理登錄表單提交的代碼：

//Login
const loginForm = document.querySelector("#login-form");
loginForm.addEventListener("submit", async (e) => {
  e.preventDefault();

  const errorContainer = document.querySelector("#login-form-message");

  errorContainer.innerHTML = "";

  try {
    //Submitting form
  } catch (error) {
    //Handle error
  }
});

Answer 1

我是在閱讀 MDN 文檔后找到的。

這是HTMLFormElement.submit()文檔： https : //developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

這份文件很好地解釋了為什么我會遇到這個問題。

總而言之，我需要使用requestSubmit ()函數而不是submit ()函數，因為submit()函數不會觸發submit事件。

HTMLFormElement.requestSubmit()文檔： https : //developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit