jQuery как запретить отправку формы по нажатию Enter

У меня есть следующие JavaScript на моей странице не работают.

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

Я хотел бы отключить отправку формы при вводе или, еще лучше, вызвать мою форму ajax. Любое решение приемлемо, но код, который я включаю выше, не препятствует отправке формы.

16 ответов


если keyCode Не пойман, лови which:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

EDIT: пропустил его, лучше использовать keyup вместо keypress

EDIT 2: Как и в некоторых новых версиях Firefox, отправка формы не предотвращается, безопаснее добавить событие нажатия клавиши в форму. Также он не работает (больше?) просто привязав событие к форме "имя", но только к идентификатору формы. Поэтому я сделал это более очевидным, изменив пример кода соответственно.

EDIT 3: изменено bind() to on()


обычно форма представляется на Enter когда у вас есть фокус на входных элементах.

мы можем отключить Enter


еще короче:

$('myform').submit(function() {
  return false;
});

$('form').keyup(function(e) {
  return e.which !== 13  
});

на событие.который свойство нормализует событие.keyCode и события.аргументом charcode. Рекомендуется смотреть событие.что для ввода клавиш клавиатуры.

which документы.


$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

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


переизбыток необходимости захвата и тестирования каждого нажатия клавиши для ввода ключа действительно меня беспокоит, поэтому мое решение зависит от следующего поведения браузера:

нажатие ENTER вызовет клик событие на кнопке отправки (проверено в 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;
}

Если вы просто хотите отключить submit on enter и кнопку submit тоже используйте событие 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, просто и не требуется библиотека. Вот мой подробный ответ на подобную тему: отключение клавиши enter для формы

короче говоря, вот код:

<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 " на странице и посмотрите внутри нее, чтобы увидеть, какие значения возвращаются, затем вы можете настроить все эти параметры для дальнейшего улучшения кода выше в соответствии с вашими потребностями для "электронная.цель.nodeName", "электронная.цель.тип" и многое другое...


следующий код отменит использование клавиши 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 года спустя и ни один человек не ответил на этот вопрос полностью.

asker хочет отменить отправку формы по умолчанию и вызвать свой собственный Ajax. Это простая просьба с простым решением. Нет необходимости перехватывать каждый символ, введенный в каждый вход.

предполагая, что форма имеет кнопку "Отправить", будь то <button id="save-form"> или <input id="save-form" type="submit">, do:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});

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

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

это должно отключить все формы с кнопками отправки в вашем приложении.