表单提交使用两次提交（）上KEYUP(Form submitted twice using subm

我有一个类似的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，所以一切对我来说OK，直到我在谷歌Chrome和Internet Explorer的测试。

当我按在后来的浏览器回车键，有时我会得到两次提交表单。这是很容易发现，因为我会在我的数据库中得到重复的条目，我看到两个POST S使用提琴手。

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

我的问题是：

为什么不浏览器巧妙地避免第二成形后（如Firefox在我的测试所做的那样）？

我应该期待在所有平台上的主流浏览器的这种行为？

有没有改善这种代码的方式，所以我进行了提交使用JavaScript，但不获取表单提交两次？

Answer 1:

为什么不浏览器巧妙地避免第二成形后（如Firefox在我的测试所做的那样）？

这是默认的行为。如果你没有你的脚本和默认行为是这样的形式不会在进入自检。

我应该期待在所有平台上的主流浏览器的这种行为？

是

有没有改善这种代码的方式，所以我进行了提交使用JavaScript，但不获取表单提交两次？

使用全球mutex变量并设置它一旦表单发送-检查它在后续的POST验证。或者，从返回false keyup处理程序和停止事件传播。

Answer 2:

有些浏览器将其解释为输入按钮作为提交如果只有一个表单按钮。刚刚return false在功能，防止提交表单的默认行为。

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

Answer 3:

您的表单提交后马上进入已被按下（在KeyDown和前KEYUP火灾）所以你可以做

$(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();
        }
     });
 });

一个简单的测试。