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


773

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

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


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

Я просто не использую теги формы, потому что я предпочитаю обрабатывать формы с помощью запросов ajax нетрадиционными способами (т. Е. Отправлять некоторые поля, когда их фокус отбрасывается и т. Д.). Вы также можете сделать специальный слушатель, чтобы поймать клавишу Enter и обработать ее, только если вы хотите это сделать.
Хуан

Ответы:


881

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

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

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

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

7
В настоящее время я просто ищу быстрое решение, и у меня нет времени для реализации элементов проверки. Я ценю ответы каждого, но это тот, с которым я собираюсь пойти в то же время. благодарю вас.
DForck42

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

3
Я видел ситуации (Internet Explorer только) , где вам нужно привязать к keydownна documentвместо windowдля этого к работе.
MartinHN

8
Возможно, вы захотите добавить && !$(document.activeElement).is('textarea')условие, иначе новые строки внутри текстовой области заблокированы (по крайней мере, в IE).
Вспышка

1
Это работает для меня. Но это также мешает добавить разрыв строки в текстовой области.
Сезар Леон

613

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

Если у вас нет <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 (ввод numpad).

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

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

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


11
Это должен быть хороший ответ, так как он также имеет дело с формой, включая textarea, и лучше объясняет распространение событий
foobar

6
":input:not(textarea):not([type=submit]):not(button)"если вы используете <button>вместо<input type=submit>
Simon_Weaver

Это не позволяет клавише ввода работать с любым вводом, кроме textarea. Это не хорошее решение
mate.gwozdz

Должна ли быть толстая кишка раньше input?
xfactorial

1
@YodaDaCoda: согласовано и скорректировано.
BalusC

110

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


6
Errrr ... Это чистое золото. Если это действительно работает кросс-браузер, это заслуживает того, чтобы пойти на вершину! Как так много людей ответили различными вариантами нажатия клавиш, нажатия клавиш и т. Д., Но пропустили этот стандартный ответ?
Джон Рис

4
С одной стороны, это просто и предотвращает все подводные камни, предлагаемые принятыми ответами. С другой стороны, это похоже на небольшое использование стандарта. Престижность за включение атрибута aria- *. Я хотел бы услышать больше отзывов об этом.
Solvitieg

2
Также работает как <input type="submit" disabled style="display: none" aria-hidden="true" />и вы можете уменьшить размер вашей страницы на несколько символов. :-P
gaefan

7
IE 11 отправляет в любом случае.
CamaroSS

2
Safari - это новый IE.
twistedpixel

68

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

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

7
Вы можете либо связать последние 3 селектора, либо связать несколько событий одним методом, например $("#search").bind('keypress keyup keydown',preventSubmit);
Моак

Поскольку в веб - формы ASP.NET все должно быть вложены в <form>тег, то введите ключ будет отправить форму ... Это решение отключить клавишу ввода и проблема решена , хотя, спасибо @ Dave! Затем я активировал клавишу ввода для определенных полей id.
Ян Кэмпбелл

@Upgradingdave Как вы можете написать «log ()» вместо «console.log ()»?
Radbyx

1
@radbyx ... хороший улов, должно быть console.log, я обновил свой ответ.
Обновление

Обратите внимание, что с keypress keyup keydownвами дважды вызвать любой код в условии if .
Кай Ноак

56

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

<form onsubmit="return false;">

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


У меня работает в Chrome, это также отключит кнопки отправки, что хорошо, если вы хотите вызвать событие onlick на самой кнопке отправки. Подсказка Ajax: добавьте вызов функции перед возвратом, и пользователь все равно сможет нажать клавишу ввода, не отправляя форму на страницу.
Деннис Хайден

Работал для меня на Chrome, IE-11 и Firefox и был самым простым решением для реализации. Отключение клавиши ввода во всех разделах страницы, как это делают некоторые ответы, кажется слишком экстремальным и подверженным ошибкам.
Роберто

Спасибо. это сработало для меня.
LU

23

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

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

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


Я думаю, что оригинальный ответ e.whichбыл в порядке; нет необходимости менять его на e.keyCode. Оба возвращают значение 13 для клавиши ввода. См stackoverflow.com/a/4471635/292060 и stackoverflow.com/a/18184976/292060
goodeye

2
Это решение заботится о двух решениях: 1.) Не отправлять формы при вводе 2.) Позволяет войти в
текстовые области

21

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

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

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


13
Это звучит хорошо, но необязательные поля являются проблематичными, пользователь может нажать Enter по ошибке, и форма будет отправлена. Я не понимаю, как вы узнаете, когда опрос не будет завершен, если вы не укажете все поля как обязательные (выбор по умолчанию, пустые поля не допускаются ...)
Кристоф Руссси,

19

Хорошее простое маленькое решение jQuery:

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

1
+1 Я искал альтернативу jQuery, вместо того, чтобы использовать обычную JS- var key = event.keyCode || event.which; if (key == 13) return false;
версию

1
технически это все еще POJ только с более простой оболочкой jquery. код, который вы дали, - это почти то же самое.
Eonasdan

19

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

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

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

5
Разница между Enter и Return - многие операторы в точках продаж используют исключительно цифровую клавиатуру. +1
привет

8
Теперь (21-21-2015) , для обычного ввода и ввода с цифровой клавиатуры, keyCode равен 13 [Chrome 42, IE 11, FIreFox 36]
Клифф Бертон

15

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

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

13

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

  1. Первый <button type="submit">в форме будет активирован при нажатииEnter .
  2. Это верно, даже если кнопка скрыта с style="display:none;
  3. Сценарий для этой кнопки может вернуться false , что прерывает процесс отправки.
  4. У вас все еще может быть другой, <button type=submit>чтобы отправить форму. Просто вернитесь trueк каскадному представлению.
  5. Нажатие в Enterто время, когда кнопка реального отправки сфокусирована, активирует кнопку реального отправки.
  6. Нажатие Enterвнутри <textarea>или другие элементы управления формы будут вести себя как обычно.
  7. Нажатие 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>

1
Хм, в Chrome и Firefox еще более короткая версия была бы <button disabled style = "display: none;"> <button>, которая также не требует JS для работы. Safari просто игнорирует кнопку, и поэтому все остальное будет происходить как обычно.
Erics

1
Мне действительно не понравился способ «игнорирования 13 кодов клавиш», поэтому я начал думать простым и хитрым способом, и эта идея пришла мне в голову, и когда я прокручивал эту страницу, я увидел эту ветку :). Плюс один для общей идеи и, конечно же, лучшее решение.
Джалали Шакиб

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

о, блестяще, последняя кнопка может быть такой, чтобы предотвратить дублирование при быстрых щелчках:<button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
Arash Moosapour

@ArashMoosapour, пожалуйста, не отключайте кнопки отправки, если они имеют фокус - это приводит к потере фокуса и беспорядку для доступности.
Erics

9

Придание форме действия 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>

8

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

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

<input type="button">

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

<input type="submit">

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

7

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

<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 использует его как идентификатор, чтобы отделить его от стиля CSS.


Это работает с элементами текстового поля в форме. Когда вы печатаете и нажимаете ввод в текстовом поле, поведение по умолчанию отправляет форму. Это перехватывает ключ ввода и предотвращает его отправку.
Goodeye

5

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

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

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


4

ТОЛЬКО 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) {
      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>


интересно, кто и почему понизит это: | в чем проблема с моим решением?
mate.gwozdz

Проголосовал за вклад. Принятый ответ нарушает большую часть пользовательского интерфейса, не позволяя регистрировать «ввод» во всем приложении. Фигово. Я думаю, что это хорошая идея - разрешить обработку ввода в элементах формы, особенно в кнопках, поэтому мне нравится путь, по которому вы идете. Я думаю, что это может быть достигнуто без тайм-аута, хотя. Например, просто посмотрите на атрибут элемента в вашем обработчике событий. Разрешить «кнопка» и «отправить»
Solvitieg

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

1
В первой строке опечатка. Вместо function(e)этого должно быть function(event). В противном случае это работает для меня. Спасибо.
Гильермо Пранди

1
Это абсолютный спасатель, поскольку все остальное мешает мне правильно обрабатывать события ввода сохранения для таких вещей, как встроенные правки сетки. Единственное предложение - вообще не использовать setTimeout. Я думаю, что это проблема людей с этим ответом. Это слишком привередливо. Вместо этого, для события do, on("keydown", function(event) { enterPressed = true; }а затем в событии submit, do on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;}This гарантирует, что оно будет работать независимо от задержки.
Кертис Сноуден

3

Это идеальный способ, Вы не будете перенаправлены со своей страницы

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

2

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


2

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

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

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


Я понимаю, что это вариант ответа Тома Хаббарда, который я добавил +1, потому что это фактически то, что я сделал сам сегодня, прежде чем искать другие идеи.
чеснок

2

Здесь уже есть много хороших ответов, я просто хочу внести свой вклад с точки зрения 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;
  }
});


1

Что-то, чего я не видел, ответило здесь: когда вы перемещаетесь по элементам на странице, нажатие 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/


0

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

    $('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.


0

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

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

0

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

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

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


0

Используя Javascript (без проверки какого-либо поля ввода):

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

Если кто-то хочет применить это к определенным полям, например, введите тип текста:

<script>
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>

Это хорошо работает в моем случае.


0

Зайдите в свой CSS и добавьте, что он будет автоматически блокировать отправку вашего бланка, если вы отправляете ввод, если он вам больше не нужен, вы можете удалить его или ввести activateи deactivateвместо этого

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

0

Вы также можете использовать javascript:void(0)для предотвращения отправки формы.

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>


не работает, когда у вас есть method="post"на форме. Например, я хочу, чтобы форма отправлялась кнопками, но не при нажатии клавиши ввода, когда она фокусируется на вводе.
Souleste

для этого условия вы можете использовать приведенные выше ответы, потому что этот ответ основан на запрете отправки формы путем ввода и нажмите оба. Приведенный выше пример имеет method="post"форму и его работы, проверьте еще раз.
Нишарг Шах

-2

Это сработало для меня во всех браузерах после большого разочарования другими решениями. Внешняя функция 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!');}
    );
});

-2

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

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