Jquery disable form submit on enter

У меня на моей странице есть javascript, который, похоже, не работает.

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

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

+145
27 июн. '12 в 22:23
источник поделиться
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

РЕДАКТИРОВАТЬ 2: Как и в некоторых новых версиях Firefox, представление формы не предотвращается, но безопаснее добавлять событие keypress в форму. Также он не работает (больше?), Просто привязывая событие к форме "имя", но только к идентификатору формы. Поэтому я сделал это более очевидным, изменив пример кода соответствующим образом.

ИЗМЕНИТЬ 3: Изменено bind() до on()

+299
27 июн. '12 в 22:28
источник

Связанные вопросы


Похожие вопросы

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

Мы можем отключить ключ Enter (код 13) на входных элементах в форме:

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

DEMO: http://jsfiddle.net/bnx96/325/

+42
27 июн. '12 в 22:28
источник

Еще короче:

$('myform').submit(function() {
  return false;
});
+38
07 дек. '12 в 20:41
источник
$('form').keyup(function(e) {
  return e.which !== 13  
});

Свойство event.which нормализует event.keyCode и event.charCode. Рекомендуется следить за событием. Для ввода клавиатуры.

which docs.

+22
27 июн. '12 в 22:27
источник
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

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

+12
30 мая '14 в 12:32
источник

Из-за чрезмерного количества ошибок при захвате и проверке каждого нажатия клавиши ВВОД меня вызывает ошибка, поэтому мое решение зависит от поведения браузера:

Нажатие ENTER приведет к событию клика на кнопке отправки (проверено в IE11, Chrome 38, FF 31) ** (ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/)

Итак, мое решение состоит в том, чтобы удалить стандартную кнопку отправки (т.е. <input type="submit">), чтобы вышеуказанное поведение терпит неудачу, потому что нет кнопки отправки для магического нажатия при нажатии ENTER. Вместо этого я использую обработчик jQuery click на обычной кнопке, чтобы отправить форму через метод 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

** это поведение неприменимо, если форма имеет только одно поле ввода и это поле является "текстовым" входом; в этом случае форма будет отправляться по клавише ENTER, даже если в HTML-разметке отсутствует кнопка отправки (например, поле поиска). Это стандартное поведение браузера с 90-х годов.

+5
31 окт. '14 в 21:36
источник

Вы можете сделать это отлично в чистом 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" для типа ввода = "текст". (Поскольку посетителю, возможно, потребуется нажать Enter на странице). Если вы хотите отключить "Enter" для других действий, вы можете добавить console.log(e); для ваших целей тестирования и нажмите F12 в хроме, перейдите на вкладку "console" и нажмите "backspace" на странице и загляните внутрь, чтобы увидеть, какие значения будут возвращены, затем вы можете настроить таргетинг на все эти параметры для дальнейшего улучшения кода выше, чтобы удовлетворить ваши потребности в "e.target.nodeName" , "e.target.type" и многом другом...

+3
15 мая '16 в 19:11
источник

Я не знаю, решите ли вы эту проблему или кто-то, кто пытается решить это сейчас, но вот мое решение для этого!

$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;
    }
});
+3
17 июл. '14 в 17:51
источник

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

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}
+2
26 июл. '16 в 15:08
источник

если вы просто хотите отключить отправку на кнопку ввода и отправки, также используйте форму onsubmit event

<form onsubmit="return false;">

Вы можете заменить "return false" на вызов функции JS, которая будет делать все необходимое, а также отправить форму в качестве последнего шага.

+2
09 мар. '14 в 15:22
источник

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

<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> 
+1
11 окт. '13 в 17:48
источник

3 года спустя, и ни один человек не ответил на этот вопрос полностью.

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

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

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});
+1
26 авг. '15 в 14:21
источник

Полное решение в JavaScript для всех браузеров

Код выше и большинство решений являются идеальными. Тем не менее, я думаю, что наиболее понравился один "короткий ответ", который является неполным.

Итак, вот весь ответ. в JavaScript с встроенной поддержкой IE 7.

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

Это решение теперь запретит пользователю отправлять данные с помощью ключа ввода и не перезагружает страницу или не вернет вас в начало страницы, если ваша форма находится где-то внизу.

0
02 нояб. '15 в 4:07
источник

В firefox, когда вы на входе и нажмите enter, он представит его в верхней форме. Решение находится в форме заявки на добавление:

<input type="submit" onclick="return false;" style="display:none" />
0
25 авг. '14 в 5:53
источник

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

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>
0
22 сент. '16 в 6:36
источник

Как насчет этого:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

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

-8
14 февр. '13 в 15:51
источник

Посмотрите другие вопросы по меткам или Задайте вопрос