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

Question

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

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

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

986

html jquery forms form-submit

Источник

user95710 21 май '09 в 21:09

36 ответов

Решение

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

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

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

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

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

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

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

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

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

Если у тебя есть <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, так что это не хороший селектор.

821

Источник

user157882 29 дек '09 в 21:42

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

302

Источник

user196844 24 июл '18 в 21:29

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

<form onsubmit="return false;">

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

79

Источник

user100964 24 июл '13 в 16:29

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

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

70

Источник

user202085 27 мар '12 в 13:57

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

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

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

24

Источник

user407621 30 май '14 в 12:36

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

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

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

23

Источник

user1331098 07 авг '14 в 21:28

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

Первый <button type="submit"> в форме будет активирован при нажатии Enter.
Это верно, даже если кнопка скрыта с style="display:none;
Сценарий для этой кнопки может вернуться 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>

22

Источник

user1601921 20 фев '17 в 11:28

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

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

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

22

Источник

user104392 21 май '09 в 21:35

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

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

21

Источник

user237917 09 дек '11 в 20:35

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

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

18

Источник

user4207445 23 мар '17 в 23:57

Вы также можете использовать 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>

14

Источник

user8798220 04 сен '19 в 14:44

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

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

<input type="button">

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

<input type="submit">

13

Источник

user7804980 30 май '17 в 05:29

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

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

10

Источник

user8106270 11 дек '19 в 20:48

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

9

Источник

user713797 27 апр '12 в 11:49

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

9

Источник

user1153909 15 авг '17 в 06:08

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

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

7

Источник

user292060 12 окт '13 в 23:32

Если вы используете Alpine, вы можете использовать следующее, чтобы предотвратить отправку формы, нажав Enter:

      <div x-data>
  <form x-on:keydown.prevent.enter="">...</form>
</div>

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

      <form>
  <div x-data>
    <input x-on:keydown.window.prevent.enter="" type="text">
  </div>
</form>

6

Источник

user8741781 27 янв '22 в 12:34

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

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

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

6

Источник

user74022 21 май '09 в 21:15

Я использовал этот код, чтобы отключить нажатие клавиши «ENTER» как для типа ввода [текст], так и для типа ввода [пароль], вы также можете добавить другие типы ввода, такие как [электронная почта], или также можете применить к желаемому типу ввода.

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

6

Источник

user2841183 30 авг '21 в 12:14

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

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

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

Отправка формы через Enter когда кнопка отправки находится в фокусе.
Отправка формы, когда все поля заполнены.
Взаимодействие с кнопками без отправки через 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;
  }
});

6

Источник

user2588261 02 окт '18 в 20:30

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

5

Источник

user3049675 07 дек '17 в 19:39

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

      <form @submit.prevent>...</form>

3

Источник

user7881859 14 сен '21 в 12:10

$(document).on("keydown","form", function(event)
{
   node = event.target.nodeName.toLowerCase();
   type = $(event.target).prop('type').toLowerCase();

   if(node!='textarea' && type!='submit' && (event.keyCode == 13 || event.keyCode == 169))
   {
        event.preventDefault();
        return false;
    }
});

Работает отлично!

3

Источник

user1891386 12 июн '20 в 14:27

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

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

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

2

Источник

user924177 28 июл '13 в 17:57

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

2

Источник

user1252879 19 июл '12 в 11:45

Это отключает ключ ввода для всех форм на странице и не предотвращает ввод в текстовое поле.

          // disable form submit with enter

    $('form input:not([type="submit"])').keydown((e) => {
        if (e.keyCode === 13) {
            e.preventDefault();
            return false;
        }
        return true;
    });

1

Источник

user705945 30 мар '21 в 07:34

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

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

1

Источник

user11926963 14 авг '19 в 20:04

Используя 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>

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

1

Источник

user457124 19 июн '19 в 17:40

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

1

Источник

user2186159 24 авг '16 в 12:31

Другие вопросы по тегам html jquery forms form-submit

user83632 21 май '09 в 21:19 2009-05-21 21:19 · Accepted Answer · 2009-05-21 21:19

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

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