3

我有一个与此类似的 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，所以在我使用 Google Chrome 和 Internet Explorer 进行测试之前，一切都很好。

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

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

我的问题是：

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

我应该在所有平台的所有主要浏览器中都期待这种行为吗？

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

4

4 回答 4

5

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

这是默认行为。如果您没有脚本并且默认行为是表单不会在enter.

我应该在所有平台的所有主要浏览器中都期待这种行为吗？

是的

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

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

于 2012-04-25T18:16:49.673 回答
5

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

if ($textbox.val().length > 0 && e.keyCode == 13) {
    $textbox.parent('form').submit();
    return false;
}
于 2012-04-25T18:17:01.363 回答
2

在按下输入后（在 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();
        }
     });
 });​

一个简单的测试。

于 2012-04-25T18:26:03.280 回答
1

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

您还应该在应用程序后端防止重复提交（许多 Web 框架都有这样做的内置机制，也很容易提出自定义解决方案）。

于 2012-04-25T18:14:42.263 回答