为什么在input时按下input键提交单个input字段的表单？
为什么当一个<form> <input>字段的<form>会在用户input一个值并按下Enter时重新载入表单，而如果<form> ？中有两个或更多的字段，那么它将不会被重载。
我写了一个简单的页面来testing这种古怪。
如果您在第二个表单中input一个值，然后按Enter键，则会看到它重新加载了传递input值的页面，就像您调用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>
这是一个已经出现了一段时间的鲜为人知的“怪癖”。 我知道有些人以各种方式解决了这个问题。
在我看来，最简单的旁路是简单地有一个不显示给用户的第二个input。 并非所有的用户友好的后端，它的工作来解决这个问题。
我应该注意到，我所听到的这个问题最常见的地方是IE，而不是FireFox或其他。 虽然它似乎也影响他们。
这是IE6 / 7/8中的一个已知的错误 。 看来你不会得到一个修复。
您可以为此做的最好的解决方法是添加另一个隐藏字段（如果您的工程良知允许的话）。 如果发现表单中有两个inputtypes的字段，IE将不再自动提交表单。
更新
如果您想知道为什么会出现这种情况，那么这个gem就直接来自HTML 2.0规范（第8.2节） ：
当表单中只有一个单行文本input字段时，用户代理应接受该字段中的Enter作为提交表单的请求。
按Enter键的工作方式根据（a）有多less个字段，以及（b）有多less个提交button。 它可能什么也不做，它可以提交没有“成功”提交button的表单，或者可以假装第一个提交button被单击（甚至生成一个onclick！），并提交该button的值。
例如，如果您将input type="submit"到您的双字段表单中，您会注意到它也提交了。
这是一个古老的浏览器怪癖，至less可以追溯到早期的Netscape（也许还有更多），现在不太可能改变。
<FORM>
无“行动”无效。 如果你不打算提交任何地方，你不需要单选button名称分组，你可以完全省略表单元素。
以下是我用来解决问题的代码：
<form> <input type="text" name="partid" id="partid" /> <input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" /> </form>
不，缺省行为是在input时，表单中的最后一个input被提交。 如果你不想提交，你可以添加：
<form onsubmit="return false;">
或者在你的input
<input ... onkeypress="return event.keyCode != 13;">
当然，还有更多漂亮的解决scheme，但是没有任何库或框架，这些解决scheme更简单。
这不是重新加载页面，它是提交表单。
然而，在这个例子中，因为你没有提交给它自己的表单上的action属性，这给了重新加载页面的印象。
另外，我不能重复你描述的行为。 如果我在表单中的任何文本input，并按Enter键，则无论input表单中的何处或input的数量如何，都会提交表单。
您可能想在不同的浏览器中尝试更多。
正如葡萄树已经说过的，这是植根于html 2.0规范的：
这里是如何防止这种情况发生，而无需搞砸你的url：
<form> <input type="text" name="partid" id="partid" /> <input type="text" style="display: none;" /> </form>
感谢大家的回答。 这是一个令人大开眼界，一个单一领域的forms行为不同，然后是一个多领域的forms。
处理这个自动提交的另一种方法是编写一个返回false的提交函数。
在我的情况下，我有一个onclick事件的button，所以我将带有添加的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); }
我为所有testing过的浏览器（IE，FF，Chrome，Safari，Opera）find的解决scheme是，窗体上的第一个input type=submit元素必须是可见的，并且必须是表单中的第一个元素。 我能够使用CSS布局将提交button移动到页面底部，并且不会影响结果！
<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>
IE和Chrome都会出现此问题。 它不会在Firefox上发生。 一个简单的解决scheme是将以下属性添加到窗体标签：onsubmit =“return false”
也就是说，假设您使用XMLHttpRequest对象提交表单。
是的，单个inputText字段在HTML 4中的工作方式不同。
onSubmit返回false不为我工作，但下面的修复错误工作正常
<!--Fix IE6/7/8 and HTML 4 bug --> <input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />
我通过下面的代码处理这个，但我不知道这是一个好方法。 通过查找给定表单中的input字段，以及是否防止默认操作。
if($j("form#your-form input[type='text']").length == 1) { $j(this).bind("keypress", function(event) { if(event.which == 13) { event.preventDefault(); } }); }
我认为这是一个function，但我也做了禁用它。 禁用它并不需要很大的努力。 只要捕捉到input键，忽略它，会做。
