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

sdf*_*for 74 html javascript forms

为什么<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>
Run Code Online (Sandbox Code Playgroud)

Mit*_*ers 50

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

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

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

  • 谢谢,我希望它被记录在某个地方。我浪费了几个小时调试一个大页面,认为它是别的东西,与我的 ajax 相关。在提取代码并开始逐行删除后,我才发现了“怪癖”。真是浪费时间! (2认同)
  • 你是对的,这是一个隐藏领域的简单修复.顺便提一下如果影响firefox 3.5.2.也许它被认为是一个功能. (2认同)
  • 我还发现隐藏的字段并不总是有效.在一个页面上它做了,另一个它没有 - 也很奇怪.但是用javascript隐藏字段就可以了.你需要写一篇文章"你不知道的东西会耗费你的时间" - 再次感谢 (2认同)
  • 我在Chrome中调试,隐藏字段似乎不起作用. (2认同)

Vin*_*lds 49

这是IE6/7/8中已知错误.您似乎没有得到它的修复程序.

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

更新

如果你想知道为什么会这样,这个gem直接来自HTML 2.0规范(第8.2节):

如果表单中只有一个单行文本输入字段,则用户代理应接受该字段中的Enter作为提交表单的请求.

  • +1是链接到规范中的罪魁祸首 (10认同)
  • 最后,2012 年发布的 HTML 5(即您回答的 3 年后)添加了[隐式表单提交](https://www.w3.org/TR/html5/sec-forms.html#implicit-submission ),将浏览器一直在做的事情编码化:当用户在单行文本字段中按回车键时提交表单。 (2认同)

bob*_*nce 7

按Enter键的工作方式不同,具体取决于(a)有多少个字段和(b)有多少个提交按钮.它可能什么都不做,它可能会提交没有"成功"提交按钮的表单,或者它可能会假装点击第一个提交按钮(甚至为它生成onclick!)并使用该按钮的值提交.

例如,如果您input type="submit"向两个字段的表单添加一个,您会注意到它也提交了.

这是一个古老的浏览器怪癖,至少可以追溯到早期的Netscape(可能更远),现在不太可能改变.

<FORM>

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


Jef*_*Jak 7

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

<form>
<input type="text" name="partid" id="partid"  />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>
Run Code Online (Sandbox Code Playgroud)


小智 5

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

<form onsubmit="return false;">
Run Code Online (Sandbox Code Playgroud)

或者在你的输入中

<input ... onkeypress="return event.keyCode != 13;">
Run Code Online (Sandbox Code Playgroud)

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