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

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

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

javascript html user-input webforms submit
person postfuturist    schedule 19.12.2008    source источник
comment
Попробуйте мой пример ниже. используйте e.what, а не e.keycode   -  person Tester101    schedule 20.12.2008

Ответы (6)


arrow_upward
4
arrow_downward

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

Очевидным недостатком этого является то, что пользователям потребуется включить 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>
person cLFlaVA    schedule 19.12.2008
comment
@ steveth45 см. мой пример ... кнопки ввода можно легко заменить на кнопки отправки. - person cLFlaVA; 20.12.2008
comment
Ага! Click() - это ответ! - person postfuturist; 20.12.2008
comment
@ steveth45 - для полноты картины убедитесь, что вы обрабатываете событие во всех (наиболее) распространенных браузерах. некоторые относятся к объекту события по-разному. quirksmode.org/dom/events/index.html - person cLFlaVA; 20.12.2008
comment
Что ж, если javascript не работает в других браузерах, он все равно будет вести себя правильно, потому что форма настроена на правильную работу в среде без javascript (независимо от вебкита). - person postfuturist; 20.12.2008
comment
Кстати, я принял этот ответ, потому что он содержит часть, необходимую мне для работы моего кода, а именно вызов click() вместо focus() на целевой кнопке отправки. - person postfuturist; 20.12.2008

arrow_upward
2
arrow_downward

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

person bobince    schedule 20.12.2008

arrow_upward
2
arrow_downward

Как насчет использования 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>

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

person coretys    schedule 01.01.2010
comment
And the earth gets saved ... ЛОЛ! - person Nirmal; 02.01.2010

arrow_upward
0
arrow_downward

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


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
    }
}
person Tester101    schedule 19.12.2008
comment
этот код что-то делает только в том случае, если вы поместите код в область с надписью //сделать что-то и нажмете клавишу ввода - person Tester101; 21.12.2008

arrow_upward
0
arrow_downward

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

so: 

form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}
person Triptych    schedule 19.12.2008
comment
Хм, трюк здесь будет заключаться в том, чтобы определить изнутри этой функции, если она была доставлена ​​сюда пользователем, нажимающим клавишу ввода в текстовом вводе или нажимающим фактическую кнопку отправки. Является ли это возможным? - person postfuturist; 20.12.2008
comment
@steveth45: Насколько я знаю, нет. При вызове onsubmit все this/e.target/e.srcElement указывает на элемент формы, а не на кнопку. - person some; 20.12.2008

arrow_upward
0
arrow_downward

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

person finpingvin    schedule 19.12.2008
comment
Да, различные кнопки отправки по-прежнему нуждаются в значениях, отправленных из каждого из различных входных данных в форме, поэтому разделение формы не работает. - person postfuturist; 20.12.2008
comment
А на стороне сервера нельзя делать разные действия в зависимости от того, какие поля были заполнены? - person finpingvin; 20.12.2008
comment
Я мог бы, но это не имело бы никакого смысла с моей страницей и совершенно не связано с этой проблемой. - person postfuturist; 20.12.2008