Используйте Javascript, чтобы изменить, какая отправка активируется при нажатии клавиши enter
-
23-08-2019 - |
Вопрос
У меня есть форма на HTML-странице с несколькими кнопками отправки, которые выполняют различные действия.Однако, когда пользователь вводит значение в текстовый ввод и нажимает enter, браузеры обычно действуют так, как если бы последовательно была активирована кнопка next submit (следующая отправка).Я хочу, чтобы произошло определенное действие, поэтому одно из решений, которое я нашел, состояло в том, чтобы вставить невидимые кнопки отправки в 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, но мне не удалось заставить это работать.Перехват нажатия клавиши и настройка фокуса на правильную отправку не работает.
Есть ли какой-либо способ с помощью Javascript или иным образом выбрать, какая кнопка отправки будет использоваться, когда пользователь нажимает клавишу ввода при вводе текста в HTML-форме?
Редактировать:Чтобы уточнить, форма не может требовать, чтобы Javascript принципиально "работал".Меня не волнует, является ли отправка клавиши enter нежелательной без 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()
}
}
Редактировать:ОКОНЧАТЕЛЬНОЕ РЕШЕНИЕ:
Работает с любым браузером и перехватывает клавишу ввода только при необходимости:
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;
}
}
Решение
Одним из способов было бы удалить все кнопки отправки и использовать кнопки ввода для отправки формы программно.Это лишило бы возможности отправить форму, нажав клавишу enter в текстовом поле.Вы также могли бы оставить одну кнопку отправки в качестве функции отправки по умолчанию, а для остальных использовать обычные кнопки ввода и отправить форму программно.
Очевидным недостатком этого является то, что пользователям потребуется включить JavaScript.Если это не проблема, то это вопрос к вам.
Редактировать:
Здесь я попытался привести для вас пример, используя 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:ни один из них, как правило, не является надежным.Я обычно использую абсолютно расположенную кнопку отправки перед остальными на странице, расположенную в левой части страницы.Это все еще довольно некрасиво, но делает свою работу.
Как насчет использования CSS?Вы можете просто установить первую кнопку, вашу кнопку по умолчанию, за пределами видимой области экрана с "положением:абсолютный;слева:- 200 пикселей;Наверх:- 200 пикселей;".Насколько я помню, он не будет проигнорирован ни одним браузером, потому что он не является невидимым.Это работает просто отлично:
<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;
}
Как насчет использования отдельных форм?Может быть, я упускаю что-то, что делает это невозможным: P