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