使用 submit() 时如何防止Default()？答案

【问题标题】：How to preventDefault() when using submit()?使用 submit() 时如何防止Default()？
【发布时间】：2020-07-14 11:20:51
【问题描述】：

我正在尝试创建一个输入字段，在按下输入时提交。当我尝试使用 submit() 函数时，我会重置默认页面。我不知道如何取消这个。我尝试使用事件侦听器进行提交，甚至将匿名函数传递给 submit()，但似乎都不起作用。

addTask.oninput = () => {
    window.onkeydown = (key) => {
        if (key.keyCode === 13) {
            newTaskForm.submit()
            console.log(newTaskForm.addTask.value)
        }
    }
}

PS：如果你认为这是我已经尝试过的其中之一，请说出来。可能只是弄乱了一些语法。

【问题讨论】：

那么..您想在输入时提交表单但阻止一起提交？
不，我想阻止重置页面。这就是函数的作用不是吗？
submit 将表单提交到表单action 中的页面，如果未设置，则提交到自身。听起来它正在做它应该做的事情。否则你可能想使用 xhr。
@TomášČikovský 页面必须重定向才能将数据提交到服务器，除非您使用 ajax 请求提交数据。
如果您使用preventDefault()，您不会阻止重新加载，您会阻止表单提交。正是表单提交本身导致您根据表单的target 转到新位置。如果目标是同一个页面，那么提交将点击同一个 URL 并重新加载页面，但您会丢失所有数据。如果你想提交并停留，很可能你需要使用AJAX将数据发送到后端。

标签： javascript preventdefault

【解决方案1】：

addTask.oninput = () => {
    window.onkeydown = (key) => {
        key.preventDefault();
        if (key.keyCode === 13) {
            newTaskForm.submit()
            console.log(newTaskForm.addTask.value)
        }
    }
}

key 实际上是代码中的一个事件。

如果您不想在 .submit() 之后提交表单

然后你可以使用：

newTaskForm.addEventListener('submit', (e) = > {
  e.preventDefault();
})

【讨论】：

是的。 key是这里的一个事件，但遗憾的是这并不能解决问题。

【解决方案2】：

是的，所以我的错我实际上不知道发生了什么，但我什至在提交问题之前就尝试了答案并且它没有工作，可能只是犯了一些愚蠢的错误。对不起，我浪费了你的时间：D

【讨论】：

那么它现在可以工作了吗？如果是这样，请将此答案标记为完整或删除问题以免混淆其他人。

【解决方案3】：

提交功能就是这样工作的，并且会一直这样做。所以我不应该使用它并用javascript保存自己。

【讨论】：