jquery відключити форму надсилати при введенні


207

На своїй сторінці у мене є такий JavaScript, який, здається, не працює.

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

Я хотів би відключити подання форми під час введення, а ще краще, щоб зателефонувати моїй формі Ajax надіслати. Будь-яке рішення є прийнятним, але код, який я включаю вище, не заважає форму надсилати форму.


3
Ось простий HTML єдине рішення: stackoverflow.com/a/51507806/337934
Самба

Відповіді:


420

Якщо вас 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()наon()


15
jQuery нормалізує його e.which, тому вам не потрібно тестувати e.keyCode, але +1 для найбільш ймовірної причини цієї проблеми.
Bojangles

4
Вам це потрібно return false;? e.preventDefault();здається enougth
kromigo

10
Важливо! Цей блок розривів у текстовій області.
Німецький Хохлов

4
Проблема полягає в тому, що якщо я маю текстове поле в тому самому вигляді, тепер я не можу додати запис (щоб створити новий рядок) у текстовому полі.
Тікі

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

62

Зазвичай форма подається Enterтоді, коли ви зосереджені на елементах введення.

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

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

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


Кнопка "iOS Go" була моєю проблемою у власному полі автозаповнення. Це вирішило це.
Ділан Валаде

11
Це запобігає використанню ключа введенняtextareas в тій же формі. Використання $("form input")замість цього, $("form :input")здається, виправить. DEMO: 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

Поширена ситуація, коли ви можете зберегти подання форми, але відключити подання натисканням клавіші "enter", це якщо ви вирішите використовувати 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

Більшість відповідей вище заважає користувачам додавати нові рядки в поле текстової області. Якщо ви хочете уникати цього, ви можете виключити цей конкретний випадок, перевіривши, який елемент на даний момент має фокус:

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

8

Перебіг необхідності фіксувати та перевіряти кожне натискання клавіші ENTER дійсно мене помиляє, тому моє рішення покладається на таку поведінку браузера:

Натискання клавіші ENTER призведе до події клацання на кнопці подання (перевірена в IE11, Chrome 38, FF 31) ** (посилання: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )

Тому моє рішення полягає в тому, щоб видалити стандартну кнопку подання (тобто <input type="submit">), щоб вищезгадана поведінка вийшла з ладу, оскільки немає кнопки подання, щоб магічно натискати при натисканні клавіші ENTER. Натомість я використовую обробник клацань 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 поле введення, і це поле є текстовим вводом; у цьому випадку форма буде подана за допомогою клавіші ENTER, навіть якщо в розмітці HTML немає кнопки подання (наприклад, у полі пошуку). Це було стандартною поведінкою браузера з 90-х років.


Я додав поле невидимого вводу для лічильника "форма буде подана на клавішу ENTER", викликана "формою є лише 1 поле введення, і це поле є" текстовим "вводом".
Luo Jiong Hui

6

якщо ви просто хочете відключити подачу при натисканні кнопки введення та надсилання, також використовуйте подію підписки форми

<form onsubmit="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 на сторінці) Якщо ви хочете відключити "Enter" також для інших дій, ви можете додати console.log (e); для ваших тестових цілей і натисніть F12 в хромі, перейдіть на вкладку "консоль" і натисніть "назад" на сторінці і загляньте всередину, щоб побачити, які значення повертаються, тоді ви можете націлити всі ці параметри для подальшого покращення коду. вище, щоб відповідати вашим потребам у "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, коли ви входите і натискаєте клавішу Enter, він надсилає верхню форму. Рішення у формі подання буде додано:

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

1

Через 3 роки жодна людина не відповіла на це питання повністю.

Запитувач хоче скасувати подання форми за замовчуванням та зателефонувати у власний Ajax. Це простий запит із простим рішенням. Немає необхідності перехоплювати кожен символ, введений у кожен вхід.

Припустимо, що у формі є кнопка для надсилання, чи <button id="save-form">є <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;});

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


8
Це також запобігає надсиланню форми, якщо натиснути кнопку "Надіслати".
Маріо Вернер

-10

Як щодо цього:

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

Це має вимкнути всі форми з кнопками надсилання у вашому додатку.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.