Как избежать дублирования подачи для единичных форм ввода?

Question

У меня есть одна форма ввода:

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

В большинстве браузеров, когда пользователь вводит текст в этот единственный ввод и нажимает кнопку «Ввод», форма отправляется.Это здорово, но я хочу сделать еще один шаг вперед и сделать так, чтобы, если пользователь что-то печатал и фокус потерян, форма отправлялась.

В настоящее время я подключился к событию change в jQuery, вот так:

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

Это работает для случая, когда я изменяю входное значение и фокусируюсь, но если я изменяю входное значение и нажимаю «ввод», то форма отправляется дважды (один раз для «ввода» и один раз для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

Просто улучшение решения 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;
   };
})());

Answer 3

Вы пробовали размытие http://api.jquery.com/blur/

Срабатывает, когда вход теряет фокус.