为什么在输入中按Enter键提交具有单个输入字段的表单

Question 1

当用户输入一个值并按时，为什么只有<form>一个<input>字段的a会重新加载表单Enter，而如果其中有2个或更多字段，则<form>为什么没有？

我写了一个简单的页面来测试这种奇怪的情况。

如果您以第二种形式输入值并按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>

Question 2

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

在我看来，最简单的绕过方法就是简单地让第二个输入不显示给用户。并非在后端授予所有这些用户友好的功能，它确实可以解决问题。

我应该注意，我听说此问题的最常见的地方是IE，而不是FireFox或其他。尽管它似乎确实也会影响他们。

Question 3

这是IE6 / 7/8中的已知错误。看来您不会得到修复。

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

更新资料

如果您想知道为什么会出现这种情况，那么可以将此宝石直接从HTML 2.0规范（第8.2节）中提取出来：

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

Question 4

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

<form onsubmit="return false;">

或在您的输入中

<input ... onkeypress="return event.keyCode != 13;">

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

Question 5

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

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

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

<表格>

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

Question 6

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

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

Question 7

它并没有像这样重新加载页面，而是在提交表单。

但是，在此示例中，因为您在表单上没有任何动作属性，所以该表单提交给自身，给人以重新加载页面的印象。

另外，我无法复制您描述的行为。如果我在表单中的任何文本输入中，然后按Enter键，那么无论输入位于表单中的何处或有多少输入，它都会提交表单。

您可能想在其他浏览器中进行更多尝试。

Question 8

正如vineet所说的，这源于html 2.0规范：

这是在不增加您的网址的情况下防止这种情况发生的方法：

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

Question 9

感谢所有回答。令人惊讶的是，具有单个字段的表单的行为不同于具有多个字段的表单的行为。

处理此自动提交的另一种方法是对返回false的Submit函数进行编码。

就我而言，我有一个带有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);
}

Question 10

我为所测试的所有浏览器（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>

Question 11

在IE和Chrome中都会出现此问题。在Firefox上不会发生。一个简单的解决方案是将以下属性添加到表单标签：onsubmit =“ return false”

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

Question 12

是的，形式单一的inputText领域工作的不同在HTML 4
的onsubmit返回假工作不适合我，但下面的BUG修复工作正常

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

Question 13

我通过以下代码处理了此问题，但是我不确定这是否是一个好方法。通过以给定的形式查找输入字段，如果输入字段为1，则阻止默认操作。

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

Question 14

我认为这是一个功能，不过我也确实禁用了它。禁用它并不需要付出很大的努力。只需捕获Enter键，将其忽略即可。