使用输入键提交表单错误答案

【问题标题】：Form submit with enter key acts wrong使用输入键提交表单错误
【发布时间】：2014-02-04 11:43:33
【问题描述】：

我在我的应用程序中使用 laravel 和 sammy.js。我的登录表单如下所示：

<form action="#/login" method="post">
<!-- inputs -->
</form>

现在，sammy.js 像这样捕获它：

this.post('#/login',function(){
         //handle, send to laravel for login
        });

我的问题是，如果我按下回车键，显然不是提交表单，这将导致this.post('#/login') 事件被捕获并执行函数，HTTP 请求已经发出，并且 laravel 路由被要求。由于路由不存在，所以会抛出MethodNotAllowedHttpException。

现在，问题是：为什么会发生这种情况？按“提交”按钮进行登录时，按回车键会导致上述错误。

我想要这个问题的实际解决方案以及对它的解释，而不是像按键上的 e.preventDefault() 或 js 中的 return false 这样的补丁。

注意：sammy 已正确初始化，表单位于 sammy 工作的容器中，并使用以前版本的站点中使用的 enter 键提交。现在已经发生了很多变化，所以还原不是一个好的选择，所以我想要一个关于如何解决问题的实际建议。

谢谢

【问题讨论】：

您使用的是哪种浏览器？
我正在使用谷歌浏览器
我刚刚在 Firefox 中尝试过，而且更奇怪的是，像 chrome 一样按回车键进入 myserver/# instead 或 myserver/#/login。单击提交按钮有效，登录，并显示正确的 url。我说它更奇怪的原因是因为我的 sammy init 在myserver/#，所以它可能会达到那么远，但不会更远

标签： javascript php forms laravel sammy.js

【解决方案1】：

引用 Html5 规范中的 4.10.22.2 Implicit submission 部分：

用户代理可以在每个表单中建立一个按钮作为表单的默认按钮。这应该是树形顺序中的第一个提交按钮其表单所有者是该表单元素，但用户代理可以选择如果另一个按钮更适合该平台，则另一个按钮。如果平台支持让用户隐式提交表单（例如，在某些平台上，在输入文本时按“回车”键字段被聚焦隐式提交表单），那么这样做必须导致表单的默认按钮的激活行为（如果有）运行。

简而言之，无论 SammyJs 如何，点击 Enter 键将始终提交表单（发出 Http 请求）。请注意，即使没有提交按钮，回车键也会提交表单！

您是否从 #/login Sammy 路由返回 false？

【讨论】：

不，我不会返回 false。问题是，表单中包含的唯一按钮就是我所指的那个按钮——它可以工作。那么提交按钮除了实际提交表单并发出 HTTP 请求之外，是否还有其他功能？如果您认为需要，我可以提供更多代码 :) 谢谢