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

IT技术 javascript html forms
2021-02-03 15:01:26

为什么当用户输入一个值并按下 时<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>
6个回答

这是一个鲜为人知的“怪癖”，已经有一段时间了。我知道有些人已经通过各种方式解决了它。

在我看来，最简单的绕过方法是简单地使用不向用户显示的第二个输入。尽管后端并非所有用户友好，但它确实可以解决问题。

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

谢谢，我希望它被记录在某个地方。我浪费了几个小时调试一个大页面，认为它是其他东西，与我的 ajax 相关。在我提取代码并开始逐行删除后，我才发现了“怪癖”。真是浪费时间！
2021-03-19 15:01:26
我正在 Chrome 中调试，隐藏字段似乎不起作用。
2021-03-20 15:01:26
啊，是的，我感受到了你的痛苦......这就是我发现它的方式，比如 5-6 年前......
2021-03-27 15:01:26
我还发现隐藏字段并不总是有效。在一页上它做了而另一页没有——也很奇怪。但是用javascript隐藏该字段就可以了。你需要写一篇文章“你不知道的事情会占用你的时间” - 再次感谢
2021-04-01 15:01:26
你是对的，这是一个带有隐藏字段的简单修复。顺便说一下，如果影响 Firefox 3.5.2。也许它被认为是一个功能。
2021-04-11 15:01:26

这是IE6/7/8 中的一个已知错误。您似乎不会得到修复。

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

更新

如果您想知道为什么会这样，这个 gem 直接来自HTML 2.0 规范（第 8.2 节）：

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

花了几个小时在 Chrome 中调试这个。感谢您指出它来自规范。
2021-03-12 15:01:26
你，一个有资格的开发者，因为你没有仔细阅读文档而被 w3org “设计，RTFM”。
2021-03-16 15:01:26
如果这是一个错误，那只是因为 IE 坚持实施 HTML 2 早已超过其销售日期。你找到了部分已经长过时由你写你的答案的时候：HTML 2.0在1995年就出来了，这是在1997年取代HTML 3.2本标准掉线支配浏览器应该如何处理表单提交。HTML 4.0 (1999) 仅根据提交表单的示例（例如== ）谈论激活提交按钮。
2021-03-24 15:01:26
最后，HTML 5 于 2012 年发布（在您回答之后的 3 年），添加了隐式表单提交的概念，将浏览器一直在做的事情编成法典：当用户在单行文本字段中点击输入时提交表单。
2021-03-26 15:01:26
这也发生在 Firefox 3.5
2021-04-09 15:01:26

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

<form onsubmit="return false;">

或者在您的输入中 

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

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

我刚刚在我的网站上遇到了这个问题。在我看来，最新的 chrome 版本现在实现了W# SEC8.2，这破坏了我正在开发的网站上的一些功能。
2021-03-12 15:01:26

根据 (a) 有多少字段和 (b) 有多少提交按钮，按 Enter 的工作方式有所不同。它可能什么都不做，它可能提交没有“成功”提交按钮的表单，或者它可能假装点击了第一个提交按钮（甚至为它生成一个 onclick！）并使用该按钮的值提交。

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

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

<形式>

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

谢谢，很好的答案。虽然我需要表单来序列化 Ajax 的字段。我可以手动编码它，但是对于许多形式，这将是一种痛苦。
2021-04-03 15:01:26

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

<form>
<input type="text" name="partid" id="partid"  />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>
其它你可能感兴趣的问题
上一篇在javascript中检测按键的最简单方法 下一篇document.all 与 document.getElementById