Запретить пользователям отправлять форму, нажав Enter

Question

У меня есть опрос на веб-сайте, и, кажется, есть некоторые проблемы с пользователями, нажимающими клавишу ввода (я не знаю почему) и случайно отправляющими опрос (форму), не нажимая кнопку отправки. Есть ли способ предотвратить это?

Я использую HTML, PHP 5.2.9 и jQuery в опросе.

Answer 1

Вы можете использовать такой метод, как

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

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

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

Answer 2

Запретить ввод ключа в любом месте

Если у вас нет <textarea> в вашей форме, просто добавьте следующее к вашему <form>:

<form ... onkeydown="return event.key != 'Enter';">

Или с помощью jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Это приведет к тому, что каждое нажатие клавиши внутри формы будет проверяться на key. Если это не Enter, он вернет true и все будет продолжаться как обычно. Если это Enter, то он вернет false, и все немедленно прекратится, поэтому форма не будет отправлена.

Событие keydown предпочтительнее, чем keyup, поскольку keyup слишком поздно для блокировки отправки формы. Исторически существовал и keypress, но это устарело, как и KeyboardEvent.keyCode. Вместо этого следует использовать KeyboardEvent.key, что возвращает имя нажатой клавиши. Если отмечен Enter, то будет проверяться 13 (нормальный ввод), а также 108 (ввод чисел).

Обратите внимание, что $(window), как предлагается в некоторых других ответах вместо $(document), не работает для keydown / keyup в IE <= 8, так что это не лучший выбор, если вы хотите охватить и эти бедные пользователи. </p>

Разрешить ввод только для текстовых областей

Если у вас есть <textarea> в вашей форме (который, конечно, должен принять клавишу ввода), то добавьте обработчик нажатия клавиш к каждому отдельному элементу ввода, который не является <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Чтобы уменьшить шаблон, это лучше сделать с помощью jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

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

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Разрешить вводить ключ для текстовых областей и отправлять только кнопки

Если вы хотите разрешить ввод ключа также на кнопках отправки <input|button type="submit">, то вы всегда можете уточнить селектор, как показано ниже.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

Обратите внимание, что input[type=text], как предлагается в некоторых других ответах, не охватывает эти нетекстовые вводы HTML5, так что это не хороший селектор.

Answer 3

Мне пришлось отловить все три события, связанные с нажатием клавиш, чтобы предотвратить отправку формы:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Вы можете объединить все вышеперечисленное в симпатичную компактную версию:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Answer 4

Если вы используете скрипт для фактической отправки, тогда вы можете добавить строку «return false» в обработчик onsubmit следующим образом:

<form onsubmit="return false;">

Вызов метода submit () в форме из JavaScript не вызовет событие.

Answer 5

Раздел 4.10.22.2 Неявная отправка спецификации W3C HTML5 гласит:

A form элемент кнопка по умолчанию является первой кнопкой отправки в древовидном порядке , у которого владелец формы это form элемент.

Если пользовательский агент поддерживает возможность неявного предоставления пользователю формы (например, на некоторых платформах нажатие клавиши «ввод», когда текстовое поле неявно фокусируется, отправляет форму), то это делается для формы, чья кнопка по умолчанию имеет определенное поведение при активации должно заставить пользовательский агент запускать искусственные щелчковые шаги активации для этой кнопки по умолчанию .

Примечание: Следовательно, если кнопка по умолчанию отключена, форма не отправляется при использовании такого механизма неявной отправки. (Кнопка не имеет поведения активации при отключении.)

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

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

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

Одной из приятных особенностей этого подхода является то, что он работает без JavaScript ; независимо от того, включен JavaScript или нет, требуется веб-браузер, соответствующий стандартам, для предотвращения неявной отправки формы.

Answer 6

Использование:

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

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

Answer 7

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

http://docs.jquery.com/Plugins/Validation

Это потребует больше работы, чем перехват кнопки Enter , но, несомненно, обеспечит более богатый пользовательский опыт.

Answer 8

Я пока не могу комментировать, поэтому выложу новый ответ

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

if(event.keyCode == 13 || event.keyCode == 169) {...}

Answer 9

Хорошее простое решение для jQuery:

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

Answer 10

Это мое решение для достижения цели, это чисто и эффективно.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});