web-dev-qa-db-ja.com

ASP.NET MVC Webサイトで「Enter」キーを押すユーザーを処理する

複数の送信ボタンがあるASP.NET MVC Webサイトで作業しています。つまり.

    <input type="submit" name="SubmitButton" value="Reset" />
    <input type="submit" name="SubmitButton" value="OK" />
    <input type="submit" name="SubmitButton" value="Back" />

ユーザーが「Enter」キーを押してフォームをすばやく送信できるようにする必要があります。 HTML標準では、ユーザーが「Enter」キーを押すと最初の送信ボタンが想定されると規定されているようです。ただし、2番目のボタン（つまり、「OK」）をデフォルトのボタンにする必要があります。話したくない理由のため、ボタンの順序を変更することはできません。

私はググってみました この投稿 ASP.NETでのPage.Form.DefaultButtonの使用について==これはASP.NET MVCでは機能しません。

Chromeでは機能しますが、IE6では機能しませんが、次のjavascriptソリューションも試しました

    $('body').keypress(function(e) {
       if (e.which === 13) {
          $("input[value='OK']").trigger('click');
       }
    });

私はいくつかの本当に極端な解決策を考えることができます。たとえば、すべてのコントロールを上記の関数をフォームに追加する形で実行します。しかし、私はそれが非常にきちんとした解決策だとは思っていません。

asp.netjavascriptjqueryasp.net-mvc
26
oscarkuo

まず、これは間違っています：

<input type="submit" name="SubmitButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="submit" name="SubmitButton" value="Back" />

3つとも送信ボタンです。リセットはtype = "reset"の入力です。並べ替えてください。第二に、私はそのようなものをうまく実装しました、そしてそれはIE6で動作します。これを試して：

    function keypressHandler(e)
    {
        if(e.which == 13) {
            e.preventDefault(); //stops default action: submitting form
            $(this).blur();
            $('#SubmitButton').focus().click();//give your submit an ID
        }
    }

    $('#myForm').keypress(keypressHandler);

Focus（）部分は、ユーザーがEnterキーを押したときにボタンが押されているように見せます。かなり気の利いた。

36
karim79

これを使って。

$(function(){
    $('input').keydown(function(e){
        if (e.keyCode == 13) {
            $("input[value='OK']").focus().click();
            return false;
        }
    });
});
10
jitter

送信ボタンは1つだけにしてください。リセットボタンはtype="reset"と戻るボタンはおそらくtype="button" このような：

<input type="reset" name="ResetButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="button" name="BackButton" value="Back" />

その後、リセットとOKは想定どおりに機能し、Javascriptで[戻る]ボタンのクリックを処理するだけで済みます。

編集：他のオプションは、リセットボタンと戻る送信ボタンをそれぞれiframe内の独自のフォームに配置することです。次に、それらはメインフォームによって無視され、デフォルトのボタンにはなりません。また、これにより、必要に応じて別のサーバーアクションをポイントすることができ、ボタンアクションをJavaScriptに依存する必要がなくなります。

4
CoderDennis

Jqueryを使用しているため、 hotkeys plugin を使用すると、そのようなアプローチをとることができます。

$(document).bind('keydown', 'return', function (evt){
    $.next("input[value='OK']").trigger("click");
    return false;
});
3
Sinan

HTML標準では、ユーザーが「Enter」キーを押すと最初の送信ボタンが想定されると指定されているようです。

いいえ、Enterキーの使用法は定義されていません。これは、さまざまな解釈の下で追加された独自の拡張機能です。ブラウザーごとに異なる動作が発生します（オプションの左から右/右から左の順序に関する異なる文化的またはUIの規則を混ぜ始めると、非常に危険になる可能性があります）。

フォームにボタンが1つしかない場合、すべてのメインストリームブラウザーはたまたま同じ動作に従います-それらはそのボタンが押されたかのようにフォームを送信します（buttonName = buttonValueはフォームデータに含まれています）。もちろん、これはボタンのonclickハンドラーが起動することを意味するものではありません-その動作はブラウザー固有です。

いくつかのボタンがあるとき、それは完全ながらくたシュートです。一部のブラウザー決定最初のボタン（および最初のボタンの定義は異なる可能性があります-ほとんどはHTMLツリーで言及された最初のボタンを使用しますが、他のユーザーは画面位置を使用しようとします）がクリックされ、送信で使用されました、他のブラウザ（特にIEの一部のバージョン）は特定のボタンなしが押されたという同様に正しい仮定をしているため、buttonName = buttonValueを含めないでください（フォームの残りの部分は問題なく送信されます）。 。

3
David

ソースのボタンの順序を変更しますが、視覚的には変更しませんか（つまり、CSSを使用してボタンを入れ替えます）？

0
Svend