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

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

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

<form ... onkeypress="return event.keyCode != 13;">

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

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

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

Событие keypress предпочтительнее, чем keydown, поскольку оно запускается только при вставке символа. keydown (и keyup) запускаются при нажатии любой клавиши, включая клавиши управления. И keyCode of keypress представляет собой вставленный фактический символ, а не используемый физический ключ. Таким образом, вам не нужно явно проверять, нажата ли клавиша ввода Numpad (108). keyup слишком поздно, чтобы заблокировать отправку формы.

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

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

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

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

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

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

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

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

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

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

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

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

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

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

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

<form onsubmit="return false;">

Вызов функции submit() в форме из JavaScript не инициирует событие.

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

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

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

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

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

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

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

Принятый ответ ok-ish, но он не останавливал передачу на numpad enter. По крайней мере, в текущей версии Chrome. Мне пришлось изменить условие кодового ключа на это, тогда оно работает.

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

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

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

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

Кнопка по умолчанию элемента 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, необходим веб-браузер, соответствующий стандартам, для предотвращения неявного представления формы.

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

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

Совершенно другой подход:

• Первый <button type="submit"> в форме будет активирован при нажатии Enter.
• Это верно, даже если кнопка скрыта с помощью style="display:none;
• script для этой кнопки может возвращать false, что прерывает процесс отправки.
• У вас может быть еще один <button type=submit>, чтобы отправить форму. Просто верните true для каскадирования представления.
• Нажатие Enter в то время как настоящая кнопка отправки будет сфокусирована, активирует реальную кнопку отправки.
• Нажатие Enter внутри <textarea> или других элементов управления формы будет вести себя как обычно.
• При нажатии Enter внутри <input> элементы формы будут запускать первый <button type=submit>, который возвращает false, и, следовательно, ничего не происходит.

Таким образом:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Предоставление формы действия "javascript: void (0);" кажется, делает трюк

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

• Не используйте type = "submit" для ввода или кнопок.
• Используйте type = "button" и используйте js [JQuery/ angular/etc] для отправки формы на сервер.

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

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

И этот код jQuery:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

В качестве альтернативы, если недостаточно ключа:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Некоторые примечания:

Изменив здесь различные полезные ответы, ключ Enter работает для keydown во всех браузерах. В качестве альтернативы я обновил bind() до метода on().

Я большой поклонник селекторов классов, взвешивающий все плюсы и минусы и обсуждения производительности. Мое соглашение об именах - это "idSomething", чтобы указать, что jQuery использует его как id, чтобы отделить его от стилей CSS.

Невозможно создать кнопку отправки. Просто поместите script на вход (type = button) или добавьте eventListener, если вы хотите, чтобы он передавал данные в форме.

Скорее используйте это

<input type="button">

чем использование этого

<input type="submit">

Вы можете сделать метод JavaScript, чтобы проверить, не было ли нажата клавиша Enter, и если это так, чтобы остановить отправку.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Просто позвоните в метод отправки.

Я думаю, что он хорошо освещен всеми ответами, но если вы используете кнопку с кодом проверки JavaScript, вы можете просто установить форму onkeypress для Enter, чтобы позвонить в ваш submit, как ожидалось:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

Onkeypress JS может быть тем, что вам нужно. Нет необходимости в больших глобальных изменениях. Это особенно верно, если вы не тот, кто кодирует приложение с нуля, и вы были вынуждены исправить какой-либо другой веб-сайт, не разрывая его и не проверяя его.

У меня была аналогичная проблема, где у меня была сетка с "текстовыми полями ajax" (Yii CGridView) и только одна кнопка отправки. Каждый раз, когда я делал поиск в текстовом поле и попадал в представленную форму. Я должен был что-то сделать с кнопкой, потому что это была единственная общая кнопка между представлениями (шаблон MVC). Все, что мне нужно было сделать, это удалить type="submit" и поместить onclick="document.forms[0].submit()

Более простой и элегантный способ сделать это:

создайте функцию validate, которая возвращает true или false (с вашей бизнес-логикой внутри нее) и добавьте этот код в свой script:

$(function() {
    $('your form selector').submit(function() {
        return validate();
    });
});

Здесь уже много хороших ответов, я просто хочу внести свой вклад с точки зрения UX. Элементы управления клавиатурой в формах очень важны.

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

Отключение Enter для отправки формы должно по-прежнему допускать следующее:

1. Подача заявки через Enter при нажатии кнопки отправки.
2. Посылка формы, когда заполняются все поля.
3. Взаимодействие с кнопками без отправки через Enter.

Это просто шаблон, но он следует всем трем условиям.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Что-то, чего я не видел, здесь ответил: когда вы вставляете элементы на странице, нажатие Enter, когда вы дойдете до кнопки отправки, вызовет обработчик onsubmit в форме, но он будет записывать событие как MouseEvent, Вот мое короткое решение для большинства баз:

Это не ответ на jQuery

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Чтобы найти рабочий пример: https://jsfiddle.net/nemesarial/6rhogva2/

Я бы хотел добавить небольшой код CoffeeScript (не тестировался в поле):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Надеюсь, вам понравится приятный трюк в предложении except).

Это работает для меня

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

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

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Этот пример использования особенно полезен для людей, работающих с IE8.

В моем случае у меня было пару jQuery UI автозаполнять поля и текстовые поля в форме, поэтому я определенно хотел, чтобы они принимали Enter. Поэтому я удалил вход type="submit" из формы и вместо этого добавил якорь <a href="" id="btn">Ok</a>. Затем я написал его как кнопку и добавил следующий код:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

Если пользователь заполняет все обязательные поля, validateData() завершается успешно и форма отправляется.

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

ONLY BLOCK SUBMIT, но не другие важные функции ввода ключа, такие как создание нового абзаца в <textarea>:

window.addEventListener('keydown', function(event){
    //set default value for variable that will hold the status of keypress
    pressedEnter = false;

    //if user pressed enter, set the variable to true
    if(event.keyCode == 13)
        pressedEnter = true;

    //we want forms to disable submit for a tenth of a second only
    setTimeout(function(){
        pressedEnter = false;
    },100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for(i = 0; i < forms.length; i++){
    //listen to submit event
    forms[i].addEventListener('submit', function(e){
        //if user just pressed enter, stop the submit event
        if(pressedEnter == true) {
            e.preventDefault();
            return false;
        }
    })
}

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

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

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

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

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

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>