Javascript 使用enter提交表单在插入输入字段后中断-为什么以及如何修复？

如果HTML表单字段具有焦点，并且您点击enter键，那么表单将被提交（除非您做了一些花哨的事情来绕过它）。奇怪的是，如果JavaScript在表单中添加了一个字段，那么enter-to-submit行为似乎会中断。例如：

函数goose（）{
document.getElementById（“addhere”）.innerHTML=“”；
}
函数检查表（）{
警报（“正常”）；
}​
--
加一只鹅

​ （这是一个精心设计的示例，试图尽可能简洁。涉及的原始代码是更现代的代码，带有JavaScript中附加的事件等。但这是复制问题的最简单代码。此外，在实际用例中，有必要通过添加/删除字段来动态修改表单。）

无论如何，您将得到一个表单，该表单有一个值为“duck”的字段。点击它并点击enter，表单将提交（您将看到一个“ok”警报，然后JSFIDLE将告诉您不要发布！）

但是，如果单击“添加一只鹅”，则会得到一个新字段。现在，您不能按enter键提交表单

为什么会这样？我在谷歌上找不到关于这种行为的任何信息，也许我使用了错误的搜索词。但这至少发生在Windows上的IE和OSX上的Chrome和FF中。因此，这似乎是一种有意的，也许是为了规范的行为。这是某种安全保护吗

而且，一旦插入字段，是否有任何方法可以恢复表单上的enter to submit行为？除了将onkey*事件添加到输入字段之外的其他方法

---

FWIW，如果输入是通过DOM方法（appendChild）添加的，或者使用jQuery或老式JavaScript设置innerHTML，这似乎并不重要。

这是因为只有当输入是表单上的唯一输入时，才会发生enter to submit行为

您可以通过在表单上放置type=submit的输入来恢复它，它甚至不必是可见的

---

看看吧：

神圣的烟雾，这应该是显而易见的。还有一件事我没有尝试！！刚刚意识到您可能需要在该输入上添加tabindex=-1，这样他们就无法在其中添加tab（这可能会让人困惑）。回想起来，这是一个愚蠢的问题-我自己一个！

function goose() { 
  document.getElementById("addhere").innerHTML="<input name=goose value=honk>";
}

function checkForm() {
  alert("ok");
}​

--

<form onsubmit="checkForm();">
  <input name="duck" value="quack">
  <div id="addhere"></div>
  </form>
<button onclick="goose();">add a goose</button>