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

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

Вот как я это делаю с помощью jQuery

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

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

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

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

Для каждого поля, которое должно отправить форму, когда пользователь нажимает клавишу ввода, вызовите функцию 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>

Чтобы отправить форму при нажатии клавиши ввода, создайте функцию 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 из СтриптизВоин.

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

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

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

<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, чтобы он не фиксировал клавишу табуляции. Хотя технически это не будет проверяться в HTML 4, спецификация HTML5 включает язык, чтобы заставить его работать так, как это уже реализовано в большинстве браузеров.

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

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

В основном есть еще один тег, <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 (). Если нажатая клавиша совпадает с клавишей ввода (13), то будет вызвана sendform () и будет отправлена ​​первая встреченная форма. Это только для Firefox и других браузеров, совместимых со стандартами.

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

Подобно примеру Криса Марасти-Георга, вместо этого используется встроенный javascript. По сути, добавьте onkeypress в поля, с которыми вы хотите, чтобы клавиша ввода работала. В этом примере действует поле пароля.

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

Я использую такой способ:

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

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

Это уловка!

Поскольку кнопки и входы 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. Таким образом, «автофокус» делает это за вас, если пользователь никогда не нажимал на какой-либо другой элемент управления в форме.

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

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

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

б) элемент управления должен быть видимым. Вы могли бы переместить его со страницы, чтобы скрыть, но вы не можете использовать 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>

Продолжая ответы, это то, что у меня сработало, может быть, кому-то это пригодится.

HTML

<form method = "post" action = "/url" id = "editMeta">
   <textarea class = "form-control" onkeypress = "submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}