我有一个与此类似的 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 键时，有时我会提交两次表单。这很容易注意到，因为我会在我的数据库中得到重复的条目，并且我会看到两个使用 Fiddler 的 POST。
经过一些测试，我发现我的问题出在 jQuery 代码上，因为如果没有它，文本框会在输入时自动提交，并且使用此代码会在某些浏览器中产生第二个 POST。
我的问题是:
为什么浏览器不巧妙地阻止第二个表单发布(就像 Firefox 在我的测试中所做的那样)？
我是否应该在所有平台的所有主要浏览器中预料到这种行为？
有没有办法改进此代码，以便我使用 JavaScript 执行提交，但不会让表单提交两次？
最佳答案
Why don't browsers smartly prevent the second form post (like Firefox did in my testing)?
这是默认行为。如果您没有脚本并且默认行为是表单不会在 enter 上发布怎么办。
Should I expect this behavior in all major browsers in all platforms?
是
Is there a way to improve this code so I perform the submit using JavaScript, but don't get the form submitted twice?
使用全局 mutex 变量并在表单 POST 中设置它 - 在后续 POST 中检查它以进行验证。或者，从 keyup 处理程序返回 false 并停止事件传播。
关于javascript - 在 keyup 上使用 submit() 提交了两次表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10321323/