HTML5: Как отправить форму, после нажатия ENTER на любом из текстовых входов?

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

  • Форма, составленная только одним вводом, подается каждый раз, когда пользователь нажимает кнопку ENTER - Идеально!
  • Вторая форма, состоящая из двух текстовых входов, не ведет себя так, она не отправляется, когда пользователь нажимает кнопку ENTER на любом из обоих входов.

Есть ли способ сделать форму с более чем одним текстовым вводом таким образом и не использовать кнопку отправки?

Ответы

Ответ 1

Попробуйте добавить это между тегами <form></form>

<input type="submit" style="display: none" />

Протестировано и работает на Firefox и Chrome. Если у вас есть тип ввода в форме, enter должен автоматически отправить его, независимо от того, видна ли она или нет.

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

$('#username').keypress(function(event) {
    if (event.keyCode == 13 || event.which == 13) {
        $('#password').focus();
        event.preventDefault();
    }
});

Обратите внимание, что есть небольшая ошибка: если пользователь выбирает имя пользователя автозаполнения браузера и нажимает enter, он все равно переходит к следующему полю, а не к его выбору. Не было времени отлаживать это, но если кто-то может понять, как это исправить, это было бы круто.

Ответ 3

Убедитесь, что ваши входы находятся внутри элемента "form" и придают элементу "form" атрибут "действие".

Ответ 4

Я искал решение этой проблемы и хочу поделиться своим решением на основе многих сообщений. (Протестировано на современном Chrome/Firefox/IE)

Таким образом, используя только Javascript, следующий код отправляет форму, если клавиша ENTER нажата в поле any или, если нажата кнопка Submit. После этого очистите /reset форму, что приятно делать.

Надеюсь, что это поможет.

<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>

<div onKeyPress="return myFunction(event)">
  <form id="form01" action="demo_form.asp" onsubmit="return false;" >
    Enter name: <input type="text" name="fname">
    <input type="button" value="Submit" onclick="myFunction(0)">
  </form>
</div>

<script>
function myFunction(e) {
   if((e && e.keyCode == 13) || e == 0) {
     alert("The form was submitted");
     document.forms.form01.submit();
     document.forms.form01.fname.value = ""; // could be form01.reset as well
   }
}
</script>

</body>
</html>