jQuery как запретить отправку формы по нажатию Enter
У меня есть следующие JavaScript на моей странице не работают.
$('form').bind("keypress", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
Я хотел бы отключить отправку формы на enter, или еще лучше, чтобы вызвать мою форму ajax submit. Любое решение является приемлемым, но код, который я включаю выше, не препятствует отправке формы.
16 ответов:
если
keyCodeНе пойман, ловиwhich:$('#formid').on('keyup keypress', function(e) { var keyCode = e.keyCode || e.which; if (keyCode === 13) { e.preventDefault(); return false; } });EDIT: пропустил, лучше использовать
keyupвместоkeypressEDIT 2: Как и в некоторых новых версиях Firefox, подача формы не предотвращается, безопаснее также добавить событие нажатия клавиши в форму. Также он не работает (больше?) просто привязав событие к форме "имя", но только к идентификатору формы. Поэтому я сделал это более очевидным, изменив пример кода соответственно.
изменить 3: изменено
bind()доon()
обычно форма подается на введите когда вы фокусируетесь на элементах ввода.
мы можем отключить введите
$('form').keyup(function(e) { return e.which !== 13 });The событие.который свойство нормализует событие.код ключа и событие.аргументом charcode. Рекомендуется следить за происходящим.что для ввода клавиш клавиатуры.
$(document).on('keyup keypress', 'form input[type="text"]', function(e) { if(e.which == 13) { e.preventDefault(); return false; } });Это решение работает на всех формах на веб-сайте (также на формах, вставленных с ajax), предотвращая только ввод во входные тексты. Поместите его в функцию готовности документа и забудьте об этой проблеме на всю жизнь.
излишняя необходимость захвата и тестирования каждого нажатия клавиши для ввода ключа действительно вызывает у меня проблемы, поэтому мое решение зависит от следующего поведения браузера:
нажатие ENTER вызовет a клик событие на кнопке отправки (проверено в IE11, Chrome 38, FF 31) ** (ref:http://mattsnider.com/how-forms-submit-when-pressing-enter/ )
поэтому мое решение-удалить стандартную кнопку отправки (т. е.
<input type="submit">) Так что выше поведение терпит неудачу, потому что нет кнопки отправки, чтобы волшебно щелкнуть при нажатии ENTER. Вместо этого я использую обработчик щелчка jQuery на обычной кнопке, чтобы отправить форму через jQuery.submit()метод.<form id="myform" method="post"> <input name="fav_color" type="text"> <input name="fav_color_2" type="text"> <button type="button" id="form-button-submit">DO IT!</button> </form> <script> $('#form-button-submit').click(function(){ $('#myform').submit(); }); </script>демо: http://codepen.io/anon/pen/fxeyv?editors=101
** это поведение не применимо, если форма имеет только 1 поле ввода, и это поле является "текстовым" вводом; в этом случае форма будет отправлена при вводе ключа, даже если нет отправки кнопка присутствует в разметке HTML (например, поле поиска). Это было стандартное поведение браузера с 90-х годов.
большинство ответов будет запретить пользователям добавлять новые строки в поле textarea. Если это то, чего вы хотите избежать, вы можете исключить этот конкретный случай, проверив, какой элемент в настоящее время имеет фокус :
var keyCode = e.keyCode || e.which; if (keyCode === 13 && !$(document.activeElement).is('textarea')) { e.preventDefault(); return false; }
Если вы просто хотите отключить отправить на enter и отправить кнопку тоже использовать форму onsubmit событие
<form onsubmit="return false;">вы можете заменить "return false" с вызовом функции JS, которая будет делать все необходимое, а также отправить форму в качестве последнего шага.
Я не знаю, если вы уже решить эту проблему, или кто-то пытается решить эту проблему прямо сейчас, но, вот мое решение для этого!
$j(':input:not(textarea)').keydown(function(event){ var kc = event.witch || event.keyCode; if(kc == 13){ event.preventDefault(); $j(this).closest('form').attr('data-oldaction', function(){ return $(this).attr('action'); }).attr('action', 'javascript:;'); alert('some_text_if_you_want'); $j(this).closest('form').attr('action', function(){ return $(this).attr('data-oldaction'); }); return false; } });
вы можете сделать это совершенно в чистом JavaScript, простой и не требуется библиотека. Вот мой подробный ответ на подобную тему: отключение клавиши ввода для формы
короче говоря, вот код:
<script type="text/javascript"> window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true); </script>этот код предназначен для предотвращения ключа "Enter" только для ввода типа='text'. (Потому что посетителю может потребоваться нажать enter на странице) Если вы хотите отключить "Enter" для других действий, вы можете добавить консоль.log (e); для вашего вашего проверьте цели и нажмите F12 в chrome, перейдите на вкладку " консоль "и нажмите" backspace " на странице и посмотрите внутри нее, чтобы увидеть, какие значения возвращаются, затем вы можете настроить все эти параметры для дальнейшего улучшения кода выше, чтобы удовлетворить ваши потребности в "электронная.цель.имя_узла","электронная.цель.типа" и многое другое...
следующий код отменит использование ключа enter для отправки формы, но все равно позволит вам использовать ключ enter в текстовой области. Вы можете редактировать его дальше в зависимости от ваших потребностей.
<script type="text/javascript"> function stopRKey(evt) { var evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) ) {return false;} } document.onkeypress = stopRKey; </script>
в firefox, когда вы на входе и нажмите enter, он представит его верхнюю форму. Решение находится в форме отправки добавить это:
<input type="submit" onclick="return false;" style="display:none" />
3 года спустя и ни один человек не ответил на этот вопрос полностью.
Аскер хочет отменить отправку формы по умолчанию и вызвать свой собственный Ajax. Это простой запрос с простым решением. Нет необходимости перехватывать каждый символ, введенный в каждый вход.
предполагая, что форма имеет кнопку "Отправить", будь то
<button id="save-form">или<input id="save-form" type="submit">, do:$("#save-form").on("click", function () { $.ajax({ ... }); return false; });
когда файл закончен (загрузка завершена), скрипт обнаруживает каждое событие для ключа "Entry", и он отключает событие позади.
<script> $(document).ready(function () { $(window).keydown(function(event){ if(event.keyCode == 13) { e.preventDefault(); // Disable the " Entry " key return false; } }); }); </script>
полное решение на JavaScript для всех браузеров
код выше, и большинство решений являются совершенными. Тем не менее, я думаю, что наиболее понравился один "короткий ответ", который является неполным.
Итак, вот полный ответ. в JavaScript с собственной поддержкой IE 7, а также.
var form = document.getElementById("testForm"); form.addEventListener("submit",function(e){e.preventDefault(); return false;});Это решение теперь будет препятствовать пользователю отправлять с помощью клавиши enter и не будет перезагружать страницу, или взять вас в верхней части страницы, если ваша форма находится где-то под.
Как насчет этого:
$(":submit").closest("form").submit(function(){ $(':submit').attr('disabled', 'disabled'); });Это должно отключить все формы с кнопками отправки в вашем приложении.
Comments