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

Question

如果 HTML 表单字段具有焦点并且您按下回车键，表单将被提交(除非您做了一些奇特的事情来绕过它)。奇怪的是，如果 JavaScript 在表单中添加一个字段，则输入到提交的行为似乎会中断。例如:

http://jsfiddle.net/SChas/1/

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>

(这是一个试图尽可能简洁的人为示例。涉及的原始代码是更现代的代码，在 JavaScript 等中附加了事件。但这是复制问题的最简单代码。此外，它是 在实际用例中需要通过添加/删除字段来动态修改表单。)

无论如何，您会得到一个表单，其中只有一个字段的值为“duck”。单击它并按回车键，表单将提交(你会看到一个“ok”警告，然后 JSFiddle 会告诉你不要发布!)。

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

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

而且，有什么方法可以在插入字段后恢复表单上的输入提交行为吗？除了向输入字段添加 onkey* 事件之外的其他方法？

FWIW，输入是通过 DOM 方法 (appendChild) 添加，还是使用 jQuery 或老式 JavaScript 设置 innerHTML 似乎并不重要。

Answer 1

这是因为只有当它是表单上的唯一输入时才会发生输入提交行为。

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

查看:http://jsfiddle.net/SChas/10/