如何避免重複提交單個輸入表單？

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