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



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



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


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

971   16  

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, подача формы не предотвращается, безопаснее также добавить событие нажатия клавиши в форму. Также он не работает (больше?) просто привязав событие к форме "имя", но только к идентификатору формы. Поэтому я сделал это более очевидным, изменив пример кода соответственно.

изменить 3: изменено bind() до on()

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

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

еще короче:

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

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

which docs.

$(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

    Ничего не найдено.