Используйте Javascript, чтобы изменить, какая отправка активируется при нажатии клавиши ввода - PullRequest
Новая
       15

Используйте Javascript, чтобы изменить, какая отправка активируется при нажатии клавиши ввода

20 голосов
/ 19 декабря 2008

У меня есть форма на странице 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. По какой-то причине они пропускают невидимую кнопку отправки. Я пытался выяснить, как перехватить нажатие клавиши ввода и активировать правильную отправку с помощью Javascript, но я не смог заставить его работать. Перехват клавиш и установка правильной отправки не работает.

Есть ли способ с помощью Javascript или иным образом выбрать, какая кнопка отправки будет использоваться, когда пользователь нажимает клавишу ввода при вводе текста в HTML-форме?

Редактировать: Чтобы уточнить, форма не может требовать Javascript для "работы" в основном. Мне все равно, если ввод ключа ввода нежелателен без Javascript в браузерах webkit, но я не могу удалить или изменить порядок кнопок отправки.

Это то, что я пробовал, это не меняет поведение отправки в браузерах webkit.
Что сработало, так это изменив focus () в следующем коде на click () . 

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;
    }
}

Ответы [ 6 ]

4 голосов
/ 19 декабря 2008

Одним из способов будет удаление всех кнопок отправки и использование кнопок ввода для отправки формы программно. Это исключило бы возможность отправки формы, нажав клавишу ввода в текстовом поле. Вы также можете оставить одну кнопку отправки в качестве функции отправки по умолчанию, а также использовать обычные кнопки ввода для других и отправить форму программно.

Очевидным недостатком этого является то, что пользователям потребуется включить 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>
2 голосов
/ 01 января 2010

Как насчет использования CSS? Вы можете просто установить первую кнопку, вашу кнопку по умолчанию за пределами видимой области экрана, с помощью «position: absolute; left: -200px; top: -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>

И земля спасется ...

2 голосов
/ 20 декабря 2008

Невидимое действие отправки по умолчанию - это разумный подход, который не тянет JavaScript в уравнение. Однако элементы формы с «display: none» не всегда надежны. Я склонен использовать кнопку отправки с абсолютным положением перед остальными на странице, расположенную слева от страницы. Это все еще довольно уродливо, но выполняет свою работу.

0 голосов
/ 20 декабря 2008

А как насчет использования отдельных форм? Может быть, я что-то упускаю, что делает это невозможным: P

0 голосов
/ 20 декабря 2008

Не перехватывать событие keydown, перехватывать событие submit.

так: 

form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}
0 голосов
/ 20 декабря 2008

Просто управляйте событием нажатия клавиши. положить на ключ ключа в теге тела 


onkeypress=CheckKeyPress()

Затем обработайте клавишу ввода 


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
    }
}
...