☰

Javascriptを使用して、Enterキーを押したときにアクティブになる送信を変更する 質問する

tag-icon • tag-icon javascript html webforms submit user-input
Javascriptを使用して、Enterキーを押したときにアクティブになる送信を変更する 質問する

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" />

これはほとんどのブラウザではうまく機能しますが、Safari や Chrome などの Webkit ブラウザでは機能しません。何らかの理由で、非表示の送信ボタンがスキップされます。Enter キーの押下をインターセプトし、Javascript を使用して適切な送信をアクティブ化する方法を見つけようとしましたが、うまくいきませんでした。キーダウンをインターセプトし、適切な送信にフォーカスを設定することは機能しません。

ユーザーが HTML フォームのテキスト入力で Enter キーを押したときに、どの送信ボタンが使用されるかを JavaScript などを使用して選択する方法はありますか?

編集: 明確に言うと、フォームは基本的に「動作」するために JavaScript を必要としません。Webkit ブラウザで JavaScript なしで Enter キーによる送信が望ましくないかどうかは気にしませんが、送信ボタンを削除したり、順序を変更したりすることはできません。

これは私が試したことです。Webkitブラウザでの送信動作は変わりません。
うまくいったのは、集中（）次のコードではクリック（）。

document.onkeypress = processKey;

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click(); // previously: focus()
    }
}

編集: 最終解決策:

すべてのブラウザで動作し、必要な場合にのみ 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" />

ジャバスクリプト:

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click();
        return false;
    }
}

ベストアンサー1

1 つの方法は、すべての送信ボタンを削除し、入力ボタンを使用してプログラムでフォームを送信することです。これにより、テキスト ボックスで Enter キーを押してフォームを送信する機能が削除されます。また、1 つの送信ボタンをデフォルトの送信機能として残し、他のボタンには通常のボタン入力を使用して、プログラムでフォームを送信することもできます。

この方法の明らかな欠点は、ユーザーが 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>

おすすめ記事