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

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

ОТВЕТЫ

Ответ 1

IMO, это самый чистый ответ:

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

Ответ 2

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

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

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

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

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

Ответ 3

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

<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, он работает правильно во всех браузерах.

Update

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

Ответ 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>

Стандарты

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

Ответ 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 и других стандартов.

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 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>

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

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

Это трюк!

Ответ 9

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

Ответ 10

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

Ответ 11

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

Ответ 12

Обращаясь к ответам, это то, что сработало для меня, может быть, кто-то найдет это полезным.

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

Ответ 13

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

Ответ 14

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

Ответ 15

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

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

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

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