javascript - 单次输入表单如何避免重复提交？

Question

我有一个输入表单:

<form id="my_form">
  <input id="my_input" type="text" />
</form>

在大多数浏览器中，当用户在此单一输入中键入文本并点击“输入”时，表单将被提交。这很好，但我想更进一步，以便在用户键入某些内容并且焦点丢失时提交表单。

我目前像这样利用 jQuery 的 change 事件:

$("my_input").change(function() {
  $("my_form").submit();
});

这适用于我更改输入值并聚焦的情况，但如果我更改输入值并点击“输入”，则表单将提交两次(一次用于“输入”，一次用于更改).

我开始沿着较低级别监听键和管理提交状态的路径前进，但我想我会把它扔给社区，看看是否有人知道更简洁的方法。

Answer 1

除了搞乱容易出错的检查，您还可以将提交事件附加到表单。如果该值等于旧值，则不要使用 ev.preventDefault() 提交表单。

var oldvalue = "";
$("#my_form").submit(function(ev){
    var newvalue = $("#my_input", this).val();
    if(newvalue == oldvalue) ev.preventDefault(); //Same value, cancel submission
    else oldvalue = newvalue;
})