Question

为什么带有单个<form>字段的<input>会在用户输入值并按 Enter 时重新加载表单，如果有是<form>中的2个或多个字段？

我写了simple page来测试这个奇怪的东西。

如果您在第二个表单中输入一个值并按Enter键，您将看到它重新加载传递输入值的页面，就像您调用了GET一样。为什么？我该如何避免呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testFormEnter</title>
</head>
<body>
<form>
  <input type="text" name="partid2" id="partid2" />
  <input type="text" name="partdesc" id="partdesc"  />
</form>
  <p>2 field form works fine</p>
<form>
<input type="text" name="partid" id="partid"  />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>

Answer 1

这是一个鲜为人知的“Quirk”已经出现了一段时间。我知道有些人已经以各种方式解决了这个问题。

在我看来，最简单的绕过就是只有第二个输入不会显示给用户。虽然在后端并不是所有用户友好的，但它确实可以解决问题。

我应该注意到，我听到这个问题最常见的地方是IE专用而不是FireFox或其他。虽然它似乎也影响了它们。

Answer 2

这是known bug in IE6/7/8。您似乎无法获得修复。

您可以为此做的最佳解决方法是添加另一个隐藏字段（如果您的工程良心允许）。当IE发现表单中有两个输入类型字段时，IE将不再自动提交表单。

<强>更新

如果你想知道为什么会这样，这个宝石直接来自HTML 2.0 specification (Section 8.2)：

当表单中只有一个单行文本输入字段时，用户代理应接受该字段中的Enter作为提交请求形式。

Answer 3

按Enter键的工作方式不同，具体取决于（a）有多少个字段，以及（b）有多少个提交按钮。它可能什么都不做，它可能会提交没有“成功”提交按钮的表单，或者它可能会假装点击第一个提交按钮（甚至为它生成onclick！）并使用该按钮的值提交。

例如，如果您在双字段表单中添加input type="submit"，则会注意到它也会提交。

这是一个古老的浏览器怪癖至少可以追溯到早期的Netscape（可能更远），现在不太可能改变。

＆LT;形式＆GT;

没有'动作'无效。如果您不打算在任何地方提交，并且您不需要单选按钮名称分组，则可以完全省略表单元素。

Answer 4

以下是我用来解决问题的代码：

<form>
<input type="text" name="partid" id="partid"  />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>

Answer 5

不，默认行为是在输入时，提交表单中的最后一个输入。如果您根本不想提交，可以添加：

if(process.env.MONGODB_URI) {
  mongoose.connect(process.env.MONGODB_URI, options);
} else {

  // Connect to local database

}

或在您的输入中

<form onsubmit="return false;">

当然还有更漂亮的解决方案，但这些解决方案更简单，没有任何库或框架。

Answer 6

它没有重新加载页面，它正在提交表单。

但是，在此示例中，因为表单上没有action属性，所以它提交给自己，这给人以重新加载页面的印象。

另外，我不能重复你描述的行为。如果我在表单中的任何文本输入中，我按Enter键提交表单，无论输入位于何处或输入有多少输入。

您可能希望在不同的浏览器中尝试更多。

Answer 7

正如Vineet已经说过的，这源于html 2.0规范：

以下是如何在不搞砸网址的情况下防止这种情况发生：

<form>
    <input type="text" name="partid" id="partid"  />
    <input type="text" style="display: none;" />
</form>

Answer 8

感谢所有回答的人。令人大开眼界的是，具有单个字段的表单与具有许多字段的表单的行为不同。

处理此自动提交的另一种方法是编写返回false的提交函数。

在我的情况下，我有一个带onclick事件的按钮，所以我将带有return关键字的函数调用移动到onsubmit事件。如果调用的函数返回false，则不会发生提交。

<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid"  />
<input type="submit" value="Find Part" />
</form

function ajaxMagic() {
  ...
  return (false);
}

Answer 9

我在所测试的所有浏览器（IE，FF，Chrome，Safari，Opera）中找到的解决方案是表单上的第一个输入type=submit元素必须是可见的并且必须是第一个形式中的元素。我能够使用CSS放置将提交按钮移动到页面底部，它不会影响结果！

<form id="form" action="/">
<input type="submit" value="ensures-the-enter-key-submits-the-form"
                      style="width:1px;height:1px;position:fixed;bottom:1px;"/>
<div id="header" class="header"></div>
<div id="feedbackMessages" class="feedbackPanel"></div>
     ...... lots of other input tags, etc...
</form>

Answer 10

IE和Chrome都会出现此问题。它不会出现在Firefox上。一个简单的解决方案是将以下属性添加到表单标记： onsubmit =＆＃34;返回false＆＃34;

当然，假设您使用XMLHttpRequest对象提交表单。

Answer 11

是的，带有单个inputText字段的表单在HTML 4中的作用不同。
onSubmit return false不适合我，但下面的修复bug工作正常

<!--Fix  IE6/7/8 and  HTML 4 bug -->
    <input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />

Answer 12

我通过以下代码处理了这个问题，但我不确定这是否是一个好方法。通过查找给定表单中的输入字段以及它的1是否阻止默认操作。

 if($j("form#your-form input[type='text']").length == 1) {
   $j(this).bind("keypress", function(event) {
     if(event.which == 13) {
       event.preventDefault();
     }
   });
 }

Answer 13

我认为这是一个功能，但我也禁用了它。它没有花大力气去禁用它。只需捕获回车键，忽略它，即可。

为什么输入时按Enter键会提交带有单个输入字段的表单

13 个答案: