Может кто-нибудь сказать мне, как отправить 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>
Стандарты
я использую <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», который является клавишей ввода
e.which == 10.
Используйте следующий сценарий.
<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>