Хтось може підказати мені, як подати HTML-форму при натисканні клавіші повернення та якщо у формі немає кнопок? Кнопки надсилання немає . Замість цього я використовую власний div.
Відповіді:
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>А ще краще, якщо ви використовуєте javascript для надсилання форми за допомогою користувацького div, ви також повинні використовувати javascript для її створення та встановлення на кнопці display: none style. Таким чином, користувачі з вимкненим javascript все одно бачитимуть кнопку "Надіслати" і можуть натискати її.
Було відзначено, що display: none не призведе до того, що IE ігнорує введення. Я створив новий приклад JSFiddle, який починається як стандартна форма та використовує прогресивне вдосконалення, щоб приховати подання та створити новий div. Я використовував стилі CSS від StriplingWarrior .
Щоб надіслати форму при натисканні клавіші Enter, створіть функцію javascript уздовж цих рядків.
function checkSubmit(e) {
if(e && e.keyCode == 13) {
document.forms[0].submit();
}
}
Потім додайте подію до будь-якої необхідної області, наприклад, у тегу div:
<div onKeyPress="return checkSubmit(event)"/>
Однак це також поведінка Internet Explorer 7 за замовчуванням (можливо, і попередні версії).
Я пробував різні стратегії, засновані на javascript / jQuery, але постійно мав проблеми. Остання проблема, що виникає, пов’язана з випадковим надсиланням, коли користувач використовує клавішу Enter, щоб вибрати зі вбудованого списку автоматичного заповнення браузера. Нарешті я перейшов на цю стратегію, яка, схоже, працює на всіх браузерах, які підтримує моя компанія:
<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 може мати вміст. Наприклад, елемент КНОПКИ, який містить зображення, функціонує, як і може нагадувати елемент INPUT, для типу якого встановлено значення "зображення", але тип елемента КНОПКА дозволяє вміст.
В основному є ще один тег, <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 (). Якщо натиснута клавіша відповідає клавіші 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 не будуть занадто різними. catch - це перевірка аргументу натискання клавіші "13", який є ключем enter
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>
По суті, я просто додаю невидимий ввід типу зображення (де " spacer.gif " - прозорий gif розміром 1х1).
Таким чином, я можу подати цю форму або за допомогою кнопки «надіслати», або просто натиснувши клавішу Enter на клавіатурі.
Це фокус!
Чому б вам просто не застосувати стилі подання 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 до полів, з якими потрібно працювати клавішу Enter. Цей приклад діє на поле пароля.
<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/>бажане.
Використання атрибута "автофокусування" працює, щоб за замовчуванням надати фокус вводу кнопці. Насправді натискання будь-якого елемента керування у формі також привертає увагу до форми, що вимагає від форми реагувати на ПОВЕРНЕННЯ. Отже, "автофокус" робить це для вас, якщо користувач ніколи не натискав на будь-який інший елемент керування у формі.
Отже, "автофокус" має вирішальне значення, якщо користувач жодного разу не натиснув жоден з елементів управління форми, перш ніж натиснути RETURN.
Але навіть тоді все одно потрібно виконати 2 умови, щоб це працювало без 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>