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

Question

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

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

<input type="button">

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

<input type="submit">

Answer 7

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

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

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

Answer 8

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

Answer 9

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

Answer 10

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