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

Question

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

Answer 1

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

<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 из СтриплингВоин.

Answer 2

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

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

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

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

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

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

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

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>

По сути, Я просто добавляю невидимый ввод типа изображения (где "spacer.gif« — это прозрачная гифка размером 1x1).

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

Это трюк!

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

С 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/> по желанию.

Answer 14

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

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

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

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