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

Question

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

Answer 1

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

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

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

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

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

Answer 2

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

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

---

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

Answer 3

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

Answer 4

Используйте тег <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 вики о <button>
• HTML5 <button>
• HTML4 <button>

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

Answer 5

Я верю, что это то, что вы хотите.

//<![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 и другими стандартами.

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

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

Это трюк!

Answer 9

Использование атрибута «автофокус» работает для придания фокуса ввода кнопке по умолчанию. Фактически, нажатие на любой элемент управления в форме также приводит к фокусировке на форме, требованию, чтобы форма реагировала на ВОЗВРАТ. Таким образом, «автофокус» делает это за вас, если пользователь никогда не нажимал на другие элементы управления в форме.

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

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

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

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

Answer 10

Поскольку кнопки и входные данные 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/> по желанию.