为什么带有一个文本 INPUT 的 FORM 会在输入时提交，而带有两个文本 INPUT 的 FORM 不会？

IT技术 javascript html forms
2021-02-22 10:59:39

我刚刚发现一个只包含一个 INPUT（未隐藏）的 FORM 会在按 Enter 时自动提交。

但是按回车键时，包含至少两个输入（未隐藏）的表单将不会提交。

（没有一个脚本里面有提交/按钮/输入[type=submit]）

看看这个jsfidle。这种行为有解释/标准吗？

<form id="form1" method="POST">
    <p>Does submit:</p>
    <input type="text" placeholder="focus and press enter"/>
</form>

<form id="form2" method="POST">
    <p>Does <strong>not</strong> submit:</p>
    <input type="text" placeholder="does not submit"/>
    <input type="text" placeholder=""/>
</form>
3个回答

此行为是在 HTML 2.0 规范中引入的。有关更多详细信息，请参阅以下文章：

表单提交和回车键？

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

来源：W3C 规范

我冒昧地在这里复制了规范的相关部分。很好的回答，点赞
2021-04-22 10:59:39
您的更新改进了答案 - 谢谢！
2021-05-02 10:59:39
这一定是 WWW 历史上最大的 WTF 之一。直到您找到规范并理解为什么要这样做。那就太好了xD
2021-05-17 10:59:39

那是浏览器特定的实现。. . 某些版本的 IE 实际上默认情况下不会这样做，但 Firefox 和其他一些浏览器认为适合假设，对于带有一个文本框的表单，用户（或页面设计者）将始终希望表单提交在Enter该字段中。

实际上有很多次我不得不围绕那个进行编码。. . 在我看来，这是最有问题的浏览器设计决策之一。

编辑：

如果您有兴趣，可以为您的问题提供更细致入微的答案。. . 显然，不同的浏览器（及其不同版本）在这种特定情况下有不同的行为，包括是否完全提交、是否click发生事件等。如果您想阅读更多信息，我可以提供更多信息的链接。

但简短的回答是，它实际上是有意的，如果浏览器没有一致支持的话。

添加以下应该在 IE 中工作。 

$(document).ready(function() { 
    $('input,select').keypress(function(event) { return event.keyCode != 13; }); 
  });

其它你可能感兴趣的问题
上一篇Ember 过渡和渲染完成事件 下一篇在 HTML 中更改对象标记上的数据内容