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

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

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

затем добавьте событие в любую область, которая вам нужна, например, на теге div:

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

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

Я пробовал различные стратегии на основе javascript / jQuery, но у меня продолжали возникать проблемы. Последняя проблема, которая возникла, включала случайное представление, когда пользователь использует клавишу 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 включает язык, чтобы заставить его работать так, как большинство браузеров уже реализовали его в любом случае.

использовать <button> тег. От стандарта W3C:

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

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

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

есть три типа, чтобы установить на <button>; они сопоставляются с типы.

<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", который является ключом ввода

использовать следующий скрипт.

<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 (если "проставка.gif " - это прозрачный gif 1x1).

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

это трюк!

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

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

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

похоже на пример Криса Марасти-Георга, вместо этого используя встроенный 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/> по желанию.

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

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

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

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

b) элемент управления должен быть видимым. Вы можете предположительно переместить его со страницы, чтобы скрыть, но вы не можете использовать display:none или visibility:hidden. То, что я сделал, было использовать встроенный стиль, чтобы просто переместить его со страницы влево на 200px. Я сделал высоту 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>