表单在keyup上使用submit（）提交两次

我有一个与此类似的jQuery / HTML代码：

  
  $(function() { $('#my-textbox').keyup(function(e) { var $textbox = $(this); if ($textbox.val().length > 0 && e.keyCode == 13) { $textbox.parent('form').submit(); } }); });  

目的是在用户按下“Enter”键时自动提交表单。 我经常使用Firefox，所以在我使用谷歌浏览器和Internet Explorer进行测试之前，一切都很好。

当我在后面的浏览器中按Enter键时，有时我会将表单提交两次。 这很容易被注意到，因为我会在我的数据库中获得重复的条目，并且我会看到两个使用Fiddler的POST 。

经过一些测试，我发现我的问题是jQuery代码，因为文本框会在没有它的情况下自动提交，并且使用此代码会在某些浏览器中产生第二个POST 。

我的问题是：

为什么浏览器不能巧妙地阻止第二个表单发布（就像Firefox在我的测试中所做的那样）？

我是否应该在所有平台的所有主流浏览器中都期望这种行为

有没有办法改进这个代码所以我使用JavaScript执行提交，但是没有提交两次提交的表单？

Answer 1

为什么浏览器不能巧妙地阻止第二个表单发布（就像Firefox在我的测试中所做的那样）？

这是默认行为。 如果您没有脚本并且默认行为导致表单在输入时不会POST，该怎么办？

我是否应该在所有平台的所有主流浏览器中都期望这种行为

是

有没有办法改进这个代码所以我使用JavaScript执行提交，但是没有提交两次提交的表单？

使用全局mutex变量并在表单POST后设置它 – 在后续POST上检查它以进行validation。 或者，从keyup处理程序返回false并停止事件传播。

Answer 2

如果表单中只有一个按钮，某些浏览器会将输入按钮解释为提交。 只需在函数中return false ，以防止提交表单的默认行为。

 if ($textbox.val().length > 0 && e.keyCode == 13) { $textbox.parent('form').submit(); return false; } 

Answer 3

您的表单在按下输入后立即提交（在keydown和keyup fires之前），所以你可以这样做

 $(function() { $('#my-textbox').keydown(function(e){ if(e.keyCode==13) e.preventDefault(); }); $('#my-textbox').keyup(function(e) { e.preventDefault(); var $textbox = $(this); if($textbox.val().length > 0 && e.keyCode == 13) { $textbox.parent('form').submit(); } }); });​ 

一个简单的测试。

Answer 4

添加首次提交后将设置为true的布尔变量，并在if条件中使用该变量。 这样可以防止意外双击。

您还应该在应用程序后端阻止双重提交（许多Web框架都有内置的机制来实现这一点，也很容易提出自定义解决方案）。