Форма представлен дважды, используя подать() на KeyUp

Question

Я имел 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 в более поздних браузерах, иногда я получал форму, представленную дважды. Это было легко заметить, потому что я получил бы дубликаты записей в моей БД, и я увижу два POST с использованием Fiddler.

После некоторого тестирования я выяснил, что моя проблема была в коде jQuery, поскольку текстовое поле автоматически отправляется без ввода, и с помощью этого кода в некоторых браузерах будет произведено второе POST.

Мои вопросы:

Почему не браузеры бойко предотвратить вторую форму пост (например, Firefox сделал в моем тестировании)?

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

Есть ли способ улучшить этот код, поэтому я выполняю отправку с использованием JavaScript, но не получаю форму, представленную дважды?

Answer 1

Почему браузеры не избегают второго сообщения формы (как это сделал Firefox в моем тестировании)?

Это поведение по умолчанию. Что делать, если у вас не было вашего скрипта, и поведение по умолчанию было таким, чтобы форма не была POST на введите.

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

Да

Есть ли способ улучшить этот код, чтобы я выполнить отправить с помощью JavaScript, но не получает форму, представленные в два раза?

Используйте глобальную переменную mutex и задайте ее после отправки POST-сообщений формы, проверяя ее на последующих POST-сообщениях для проверки. Или верните false из обработчика keyup и остановите распространение события.

Answer 2

Добавить переменную boolean, которая будет установлена ​​в true после первого отправки и использования этой переменной в вашем условии if. Это предотвратит случайный двойной щелчок.

Вы также должны предотвратить двойную отправку в бэкэнде приложения (многие веб-фреймворки имеют встроенный механизм для этого, легко придумать собственное решение).

Answer 3

Некоторые браузеры будут интерпретировать кнопку ввода как отправку, если в форме есть только одна кнопка. Только return false в вашей функции, чтобы предотвратить поведение по умолчанию от отправки формы.

if ($textbox.val().length > 0 && e.keyCode == 13) { 
    $textbox.parent('form').submit(); 
    return false; 
} 

Answer 4

Ваша форма представляется сразу после ввода была нажата (на KeyDown и перед KeyUp пожаров), так что вы можете сделать

$(function() { 
    $('#my-textbox').keydown(function(e){ 
     if(e.keyCode==13) e.preventDefault(); 
    }); 

    $('#my-textbox').keyup(function(e) { 
     e.preventDefault(); 
     var $textbox = $(this); 
     if($textbox.val().length > 0 && e.keyCode == 13) { 
      $textbox.parent('form').submit(); 
     } 
    }); 
});​ 

A simple test.