通过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;

基本上，我在这里要做的是在按下虚拟键盘上的“enter”键时在当前页面上提交表单。（效果很好）

但我也想防止默认此提交事件。( 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