无法阻止在文本输入上点击返回时发布表单[重复]答案

【问题标题】：Can't prevent form posting on hitting return on text input [duplicate]无法阻止在文本输入上点击返回时发布表单[重复]
【发布时间】：2018-07-10 00:25:30
【问题描述】：

在我的代码示例中，当您将光标放在两个输入字段之一，然后按键盘上的 ENTER 键时，时间戳编号会显示在下面的 div 中。再次按 ENTER，它会改变。

如果您取出其中一个文本字段，因此只有一个，那么表单似乎会发布（重新加载页面）。

当只有一个输入字段时，我无法弄清楚为什么会发生这种情况。

function handleKeyPress(event) {
  if (event.keyCode == 13)
    document.getElementById('theButton').click();
}
function theFunc() {
  document.getElementById("theTime").innerHTML = Math.floor(Date.now());
}

<form>
  <input type="text" name="textInput" onKeyPress="handleKeyPress(event)"><br>
  <input type="text" name="textInput2" onKeyPress="handleKeyPress(event)"><br>
  <input type="button" value="Submit" id="theButton" onclick="theFunc()">
</form>

<div id="theTime"></div>

【问题讨论】：

当表单上只有一个输入时出现，按回车将提交表单。 w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 "当表单中只有一个单行文本输入字段时，用户代理应接受该字段中的 Enter 作为提交表单的请求。"正如@Will 指出的那样，将 event.preventDefault() 添加到您的代码将阻止它提交。此代码将在提交事件处理程序有机会触发之前阻止输入的按键处理程序中的事件传播。
感谢您的解释。 event.preventDefault 的唯一问题是它不允许输入任何文本。我尝试在if (event.keyCode == 13) 之后添加它，但表单仍然提交。
您使用的是什么浏览器？我在 chrome 63 中运行我的小提琴，并且在输入按键时没有提交。我的阻止默认设置在 event.keyCode == 13 条件中，这可能有助于jsfiddle.net/3c9neqb1
Firefox，经过更多研究，我认为这是 FF 独有的问题。

标签： javascript

【解决方案1】：

Event.preventDefault()

function handleKeyPress(event) {
  if (event.keyCode == 13)
    event.preventDefault(); // magic
    document.getElementById('theButton').click();
}

function theFunc() {
  document.getElementById("theTime").innerHTML = Math.floor(Date.now());
}

<form>
  <input type="text" name="textInput" onKeyPress="handleKeyPress(event)"><br>
  <input type="button" value="Submit" id="theButton" onclick="theFunc()">
</form>

<div id="theTime"></div>

【讨论】：

您的代码的问题是它阻止输入 any 文本。
我能看到的唯一方法是添加一个空的隐藏输入字段，这很恶心。
只需移动 preventDefault。
经过更多研究，我认为这是 Firefox 独有的问题。