Как отправить форму, когда нажата клавиша возврата?

Чтобы отправить форму при нажатии клавиши enter, создайте функцию javascript в следующих строках.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

Затем добавьте событие в любую необходимую область например в тег div:

<div onKeyPress="return checkSubmit(event)"/>

Это также поведение по умолчанию Internet Explorer 7 в любом случае, хотя (вероятно, более ранние версии также).

ИМО, это самый чистый ответ:

<form action="" method="get">

  Name: <input type="text" name="name"/><br/>

  Pwd: <input type="password" name="password"/><br/>

  <div class="yourCustomDiv"/>

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

</form>

Еще лучше, если вы используете javascript для отправки формы с помощью пользовательского div, вы также должны использовать javascript для ее создания и установки стиля display:none на кнопке. Таким образом, пользователи с отключенным javascript все равно увидят кнопку отправки и смогут нажать на нее.

---

Было отмечено, что display:none заставит IE игнорировать входные данные. Я создал новый пример JSFiddle , который начинается как стандартная форма и использует прогрессивное улучшение, чтобы скрыть отправку и создать новый div. Я действительно использовал стиль CSS из StriplingWarrior .

Я пробовал различные стратегии javascript/jQuery-based, но у меня продолжали возникать проблемы. Последняя проблема, которая может возникнуть, связана с случайным отправлением, когда пользователь использует клавишу enter для выбора из встроенного списка автозаполнения браузера. Я наконец-то переключился на эту стратегию, которая, похоже, работает на всех браузерах, поддерживаемых моей компанией:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

Это похоже на принятый в настоящее время ответ Криса Марасти-Георга, но , избегая display: none, он, по-видимому, работает правильно во всех браузерах.

Обновление

Я отредактировал код выше, чтобы включить отрицательный tabindex , поэтому он не захватывает клавишу tab. Хотя это технически не будет проверяться в HTML 4, HTML5 spec включает язык, чтобы заставить его работать так, как большинство браузеров уже реализовали его в любом случае.

Используйте тег <button> . Из стандартного W3C :

Кнопки, созданные с помощью элемента BUTTON, функционируют точно так же, как кнопки, созданные с помощью элемента INPUT, но они предлагают более широкие возможности визуализации: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, функционирует как и может напоминать элемент INPUT, тип которого имеет значение "image", но тип элемента BUTTON допускает содержимое.

В принципе, есть еще один тег, <button> , который не требует javascript, который также может отправить форму. Он может быть стилизован во многом по типу тега <div> (включая <img /> внутри тега кнопки). Кнопки из тега <input /> далеко не так гибки.

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

Существует три типа для установки на <button>; они сопоставляются с типами кнопок <input> .

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

Стандарты

• W3C wiki о <button>
• HTML5 <button>
• HTML4 <button>

Я использую теги <button> с css-спрайтами и немного стиля css, чтобы получить красочные и функциональные кнопки формы. Обратите внимание, что можно написать css для, например, <a class="button"> ссылок, которые разделяют стиль с элементом <button> .

Я верю, что это то, чего ты хочешь.

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

При каждом нажатии клавиши будет вызываться функция enter(). Если нажатая клавиша соответствует клавише enter (13), то будет вызван sendform() и отправлена первая встреченная форма. Это только для Firefox и других совместимых со стандартами браузеров.

Если вы найдете этот код полезным, пожалуйста, не забудьте проголосовать за меня!

Вот как я это делаю с jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

Другие javascript не будут слишком отличаться. ловушка проверяет наличие аргумента нажатия клавиши "13", который является ключом enter

Используйте следующий сценарий.

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

Для каждого поля, которое должно отправить форму, когда пользователь нажимает enter, вызовите функцию submitenter следующим образом.

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

Я использую этот метод:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

В принципе, я просто добавляю невидимый вход типа image (где " spacer.gif " - это прозрачный gif 1x1).

Таким образом, я могу отправить эту форму либо с помощью кнопки 'send', либо просто нажав enter на клавиатуре.

Вот в чем фокус!

Почему бы вам просто не применить стили div submit к кнопке submit? Я уверен, что для этого есть javascript, но это было бы проще.

Если вы используете asp.net, вы можете использовать атрибут defaultButton в форме.

Я думаю, что у вас действительно должна быть кнопка отправки или изображение отправки... Есть ли у вас конкретная причина для использования "submit div"? Если вам просто нужны пользовательские стили, я рекомендую <input type="image"... . http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Похожие на Крис Marasti-Георг примеру, вместо использования встроенных javascript. По сути, добавьте onkeypress в поля, с которыми вы хотите работать с ключом enter. Этот пример действует на поле пароля.

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Поскольку кнопки display: none и входы не будут работать в Safari и IE, я обнаружил , что самый простой способ, не требующий дополнительных javascript хаков, - это просто добавить абсолютно позиционированный <button /> в форму и поместить его далеко от экрана.

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

Это работает в текущей версии всех основных браузеров по состоянию на сентябрь 2016 года.

Очевидно, что его рекомендуется (и более семантически правильно) просто стилизовать <button/> по желанию.

Использование атрибута "autofocus" работает для того, чтобы придать кнопке фокус ввода по умолчанию. На самом деле нажатие на любой элемент управления в форме также дает фокус на форму, требование для формы реагировать на RETURN. Таким образом, "autofocus" делает это за вас, если пользователь никогда не нажимал на какой-либо другой элемент управления в форме.

Таким образом, "autofocus" имеет решающее значение, если пользователь никогда не нажимал ни на один из элементов управления формы до нажатия RETURN.

Но даже тогда, есть еще 2 условия, которые должны быть выполнены, чтобы это работало без JS:

а) вы должны указать страницу для перехода (если оставить ее пустой, она не будет работать). В моем примере это hello.php

b) контроль должен быть видимым. Возможно, вы можете убрать его со страницы, чтобы скрыть, но вы не можете использовать display:none или visibility:hidden. Что я сделал, так это использовал встроенный стиль, чтобы просто переместить его со страницы влево на 200 пикселей. Я сделал высоту 0px так, чтобы она не занимала места. Потому что в противном случае он все еще может нарушить другие элементы управления сверху и снизу. Или вы могли бы плавать элемент тоже.

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>