1

如果 HTML 表单字段具有焦点并且您按 Enter 键，则该表单将被提交（除非您做了一些花哨的事情来绕过它）。奇怪的是，如果 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 会告诉您不要发布！）。

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

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

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

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

4

1 回答 1

2

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

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

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

于 2012-05-19T00:03:40.510 回答