如何避免重复提交单个输入表单？

Question

我有一个单一的输入形式：

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

在大多数浏览器中，当这个单一的输入和点击用户键入的文本“ENTER”键提交表单。这很好，但我想更进一步，并使其如此，以便如果用户键入内容并且焦点丢失，则会提交表单。

我目前挖掘到jQuery的change事件，像这样：

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

此工程的情况时，我改变输入值和关注了，但如果我改变输入值，然后按“Enter”键然后该表格会提交两次（一次用于“输入”，一次用于change）。

我开始走低级听密钥和管理提交状态的路径，但想到我会把它扔给社区，看看是否有人知道更清洁的方式。

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

Answer 2

你有没有尝试过的模糊事件http://api.jquery.com/blur/

当输入失去焦点这将触发。

Answer 3

只需改进Rob W的解决方案。

$('#my_form').submit((function() { 
    //Enclose variables as to not pollute the global namespace 
    var oldValue, 
     input = $('#my_input'); //cache your input 

    //Same concept as Rob W's solution 
    return function (e) { 
     var newValue = input.val(); 

     if(newValue === oldValue) { 
      e.preventDefault(); 
     } 

     oldValue = newValue; 
    }; 
})());