Как предотвратить нажатие клавиши ВВОД при отправке веб-формы?

Question

Как предотвратить отправку формы в веб-приложении нажатием клавиши ENTER ?

Answer 1

[ редакция 2012, нет встроенного обработчика, сохраните текстовую область, введите обработку]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Теперь вы можете определить обработчик нажатия клавиш в форме:

document.querySelector('form').onkeypress = checkEnter;

Answer 2

Вот обработчик jQuery, который можно использовать, чтобы остановить ввод команд, а также остановить клавишу возврата назад -> назад. Пары (keyCode: selectorString) в объекте «keyStop» используются для сопоставления узлов, которые не должны запускать свои действия по умолчанию.

Помните, что Интернет должен быть доступным местом, и это нарушает ожидания пользователей клавиатуры. Тем не менее, в моем случае веб-приложению, над которым я работаю, все равно не нравится кнопка «Назад», поэтому отключение сочетания клавиш - это нормально. Обсуждение «следует войти -> отправить» важно, но не связано с фактическим заданным вопросом.

Вот код, который вы можете подумать о доступности и о том, почему вы действительно хотите это сделать!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

Answer 3

Просто верните false из обработчика отправки

<form onsubmit="return false;">

или если вы хотите обработчик посередине

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

Answer 4

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

Answer 5

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

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

Answer 6

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

<input type="submit" />

браузер находит в форме.

Поэтому у вас нет кнопки отправки, но что-то вроде

<input type="button" value="Submit" onclick="submitform()" /> 

---

РЕДАКТИРОВАТЬ : В ответ на обсуждение в комментариях:

Это не сработает, если у вас есть только одно текстовое поле, но, возможно, в данном случае это желаемое поведение.

Другая проблема заключается в том, что для отправки формы используется Javascript. Это может быть проблемой с точки зрения доступности. Это можно решить, написав <input type='button'/> с помощью javascript, а затем поместив <input type='submit' /> в тег <noscript>. Недостаток этого подхода заключается в том, что для браузеров с отключенной поддержкой javascript вы должны будете отправлять формы на ENTER. Решение о том, как вести себя в этом случае, зависит от ФП.

Я не знаю ни одного способа сделать это без вызова javascript вообще.

Answer 7

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

Смотрите мой подробный ответ на подобный вопрос здесь

Answer 8

Все ответы, которые я нашел по этой теме, здесь или в других сообщениях, имеют один недостаток, то есть он предотвращает фактический триггер изменения также и в элементе формы. Поэтому, если вы запускаете эти решения, событие onchange также не запускается. Чтобы преодолеть эту проблему, я изменил эти коды и разработал следующий код для себя. Я надеюсь, что это станет полезным для других. Я дал класс для своей формы "protect_auto_submit" и добавил следующий JavaScript:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

Answer 9

Я потратил некоторое время на создание этого кросс-браузера для IE8,9,10, Opera 9+, Firefox 23, Safari (ПК) и Safari (MAC)

JSFiddle Пример: http://jsfiddle.net/greatbigmassive/ZyeHe/

Базовый код - вызовите эту функцию с помощью «onkeypress», прикрепленной к вашей форме, и передайте ей «window.event».

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

Answer 10

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

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

Вот и все. Клавиши будут обрабатываться как обычно браузером / полями / и т. Д. Если сработала логика ввода-отправки, то браузер найдет эту скрытую кнопку отправки и активирует ее. И тогда обработчик javascript предотвратит передачу.