23

さまざまなアクションを実行する複数の送信ボタンを含む HTML ページにフォームがあります。ただし、ユーザーがテキスト入力に値を入力して Enter キーを押すと、ブラウザは通常、次の送信ボタンが順番にアクティブ化されたかのように動作します。特定のアクションを発生させたいので、私が見つけた解決策の 1 つは、次のように、問題のテキスト入力の直後に 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 ブラウザーでの送信動作は変わりません。
うまくいったのは、次のコードのfocus()をclick()に変更することです。

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

Javascript:

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

6 に答える 6

5

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>
于 2008-12-19T20:56:47.507 に答える
4

非表示のデフォルトの送信アクションは合理的なアプローチであり、JavaScript を方程式に引きずり込むことはありません。ただし、「display: none」を含むフォーム要素は、一般的に信頼できません。私は、ページ上の他のボタンよりも前に絶対配置の送信ボタンを使用する傾向があり、ページの左側に配置されています。それはまだかなり醜いですが、仕事を成し遂げます。

于 2008-12-20T14:21:36.383 に答える
2

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>

そして地球は救われる…

于 2010-01-01T12:42:04.570 に答える
0

別のフォームを使用するのはどうですか？多分私はこれを不可能にする何かが欠けています：P

于 2008-12-19T21:49:09.943 に答える
0

キープレスイベントを制御するだけです。bodyタグに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
    }
}
于 2008-12-19T21:19:45.870 に答える
0

イベントをインターセプトしないでください。keydownイベントをインターセプトしsubmitます。

それで：

form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}
于 2008-12-19T21:25:43.317 に答える