Используйте Javascript, чтобы изменить, какой submit активируется при нажатии клавиши enter
у меня есть форма на HTML-страницу с несколько кнопок, которые выполняют различные действия. Однако, когда пользователь вводит значение в текстовый ввод и нажимает ввод, браузеры обычно действуют так, как будто последовательно активирована следующая кнопка отправки. Я хочу, чтобы произошло определенное действие, поэтому одним из решений, которое я нашел, было поместить невидимые кнопки отправки в HTML непосредственно после ввода текста, о котором идет речь, например:
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
это работает как шарм в большинстве браузеры, за исключением того, что это не в браузерах webkit, таких как Safari и Chrome. По какой-то причине они пропускают невидимую кнопку отправки. Я пытался выяснить, как перехватить клавишу enter и активировать правильную подачу с помощью Javascript, но я не смог заставить ее работать. Перехват keydown и установка фокуса на правильную отправку не работает.
есть ли способ с помощью Javascript или иным образом выбрать, какая кнопка отправки будет использоваться, когда пользователь нажимает клавишу enter в текстовом вводе в HTML-форме?
Edit: чтобы уточнить, форма не может требовать, чтобы Javascript "работал" принципиально. Мне все равно, нежелательно ли представление ключа ввода без Javascript в браузерах webkit, но я не могу удалить или изменить порядок кнопок отправки.
это то, что я пробовал, это не меняет поведение отправки в браузерах webkit.
Что сработало, так это изменить фокус() в следующий код нажмите кнопку().
document.onkeypress = processKey;
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click(); // previously: focus()
}
}
EDIT: ОКОНЧАТЕЛЬНОЕ РЕШЕНИЕ:
работает с каждым браузером и только перехватывает клавишу enter, когда это необходимо:
HTML-код:
<input type="text" name="something" value="blah"
onkeydown="return processKey(event)" />
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
Javascript:
function processKey(e)
{
if (null == e)
e = window.event ;
if (e.keyCode == 13) {
document.getElementById("foobar").click();
return false;
}
}
6 ответов
один из способов-удалить все кнопки отправки и использовать кнопки ввода для отправки формы программно. Это позволит удалить возможность отправки формы, нажав клавишу enter в текстовом поле. Вы также можете оставить одну кнопку отправки в качестве функции отправки по умолчанию, а для других использовать обычные кнопки и отправить форму программно.
очевидным коротким падением этого является то, что пользователям потребуется включить JavaScript. Если это не проблема это соображение для вас.
EDIT:
здесь я попытался сделать пример для вас с помощью jQuery (та же функциональность может быть легко создана без jQuery)... дай мне знать, если это поможет...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#f input").filter(":text").keydown( function(event) {
if (event.keyCode==13) {
$(this).nextAll().eq(0).click();
}
});
});
//--></script>
</head>
<body>
<form name="f" id="f">
<input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
<input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
<input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
</form>
</body>
</html>
невидимое действие отправки по умолчанию является разумным подходом и не перетаскивает JavaScript в уравнение. Однако элементы формы с "display: none" обычно не являются надежными. Я склонен использовать абсолютно расположенную кнопку отправки перед другими на странице, расположенную с левой стороны страницы. Это все еще довольно уродливо, но делает свою работу.
Как насчет использования CSS? Вы можете просто установить первую кнопку, кнопку по умолчанию за пределами видимой области экрана с "позиция: Абсолют; слева: -200px; сверху: - 200px;". Насколько я помню, он не будет игнорироваться любым браузером, потому что он не невидим. Это работает просто отлично:
<form method="get">
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth"
style="position: absolute; left: -200px; top: -200px;"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
</form>
и земля была спасена ...
просто контролируйте событие нажатия клавиши. поместите onKeyPress в тег тела
onkeypress=CheckKeyPress()
затем обработайте клавишу enter
function CheckKeyPress(){
var code;
if(!e) var e = window.event;
if(e.keyCode){
code = e.keyCode;
}else if(e.which){
code = e.which;
}
if(code == 13){
//Do Something
}
}
не перехватывать keydown событие, перехватывать submit событие.
так:
form.onsubmit = function(e){
// Do stuff. Change the form's action or method maybe.
return true;
}