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

Может кто-нибудь сказать мне, как отправить HTML-форму при нажатии клавиши возврата и если в форме нет кнопок? Кнопки отправки нет . Вместо этого я использую собственный div.

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

<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 в этих строках.

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

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

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

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

Я пробовал различные стратегии на основе 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:

Кнопки, созданные с помощью элемента BUTTON, работают так же, как кнопки, созданные с помощью элемента INPUT, но они предлагают более широкие возможности визуализации: элемент BUTTON может иметь содержимое. Например, элемент BUTTON, содержащий изображение, функционирует как и может напоминать элемент INPUT, тип которого установлен на «изображение», но тип элемента 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 (). Если нажатая клавиша совпадает с клавишей ввода (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 (где " spacer.gif » - это прозрачный gif размером 1x1).

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

Это уловка!

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

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

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

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

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()
  }
}

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

Поскольку 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>