表单在keyup上使用submit()提交两次

Question

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

<form action="/SomeAction" method="post">
  <input id="my-textbox" type="text" placeholder="Write something and press enter to continue..." />
</form>

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

目的是在用户按下"Enter"键时自动提交表单.我经常使用Firefox,所以在我使用谷歌浏览器和Internet Explorer进行测试之前,一切都还可以.

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

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

我的问题是:

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

我是否应该在所有平台的所有主流浏览器中都期待此行为？

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

Answer 1

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

这是默认行为.如果你没有你的脚本和默认行为是这样的形式不会职位上enter.

我是否应该在所有平台的所有主流浏览器中都期待此行为？

是

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

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

Answer 2

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

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