JQuery отключить форму отправки на ввод


208

У меня есть следующий javascript на моей странице, который, кажется, не работает.

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

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


3
Вот простое решение только для HTML: stackoverflow.com/a/51507806/337934
SamB

Ответы:


421

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

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

РЕДАКТИРОВАТЬ: пропустил, лучше использовать keyupвместоkeypress

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

РЕДАКТИРОВАТЬ 3: изменено bind()наon()


15
jQuery нормализует его e.which, поэтому вам не нужно проверять e.keyCode, но +1 для наиболее вероятной причины этой проблемы.
Bojangles

4
Вам нужно return false;для этого? e.preventDefault();кажется достаточно
Chromigo

10
Важный! Этот блок решений разрывается в текстовой области.
Герман Хохлов

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

3
keyCode === 13 && !$(e.target).is('textarea')
Теран

62

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

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

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

ДЕМО: http://jsfiddle.net/bnx96/325/


Кнопка iOS Go была моей проблемой в пользовательском поле ввода автозаполнения. Это решило это.
Дилан Валаде

11
Это предотвращает использование клавиши вводаtextareas в той же форме. Использование $("form input")вместо, $("form :input")кажется, исправить это. ДЕМО: jsfiddle.net/bnx96/279
shaneparsons,

43

Еще короче

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

35
Но это также предотвратит щелчок пользователя?
haibuihoang

5
@haibuihoang Да, это отключит отправку формы.
Том

7
Вы должны использовать, function(e) {e.preventDefault();}поскольку возвращаемые значения в обработчиках событий устарели: stackoverflow.com/a/20045473/601386
грипп

6
@ user1111929 Это прекрасно работает, но это не должен быть лучший ответ, потому что вопрос задан только о, Enterа не об отключении отправки формы с помощью Submitкнопки.
daveslab

Распространенная ситуация, в которой вы можете сохранить отправку формы, но отключить ее при нажатии клавиши «Ввод», - это если вы решите использовать onClickсобытие jQuery для проверки формы и по-прежнему отправлять с использованием jQuery. Другими словами, есть случаи, когда вы хотите отправить только через javascript / jQuery. Хотя вы все еще можете использовать AJAX с этим решением, оно отключает базовую функциональность submitметода.
JRad the Bad


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

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


9

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

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

8

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

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

Поэтому мое решение состоит в том, чтобы удалить стандартную кнопку отправки (т. Е. <input type="submit">), Чтобы вышеуказанное поведение не выполнялось, потому что нет кнопки отправки, которая бы волшебным образом нажималась при нажатии клавиши ВВОД. Вместо этого я использую обработчик щелчков jQuery на обычной кнопке, чтобы отправить форму с помощью .submit()метода jQuery .

<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-х годов.


Я добавил невидимое поле ввода в счетчик «форма будет отправлена ​​после нажатия клавиши ВВОД», вызванной «форма имеет только 1 поле ввода, и это поле является« текстовым »вводом».
Ло Цзюн Хуэй

6

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

<form onsubmit="return false;">

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


1
Это отключит отправку всех форм, включая нажатие кнопки отправки.
Ник

не 100% ... работайте регулярно, отправляйте ключ ... лучше всего использовать jquery для предотвращения
KingRider

Хороший альтернативный ответ (с оговорками выше), потому что ... ну, иногда это все, что вам нужно.
emilys

это именно то, что мне нужно для ситуации, спасибо
shababhsiddique

4

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


2
На самом деле так и должно быть e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'. С указанным кодом это позволит отправлять формы, если установлен флажок радио или флажок.
afnpires

3

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

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

2

Простой способ - изменить тип кнопки на кнопку - в HTML, а затем добавить событие в JS ...

Изменить от этого:

<form id="myForm">
   <button type="submit">Submit</button>
</form>

к

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

И в JS или JQuery добавить:

("#btnSubmit").click(function () {
    $('#myForm').submit();
});

1

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

<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

В Firefox, когда вы вводите и нажимаете ввод, он отправляет свою верхнюю форму. Решение в форме отправки и добавить это:

<input type="submit" onclick="return false;" style="display:none" />

1

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

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

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

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


-2

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

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

добавить объяснение
HaveNoDisplayName

@HaveNoDisplayName: обновлено.
Макнави

-4

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

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

Вот и весь ответ. в JavaScript с собственной поддержкой IE 7.

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

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


8
Это также предотвращает отправку формы, если вы нажмете кнопку «Отправить».
Марио Вернер

-10

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.