19

HTML:

<form id="myform">
    <input id="firstfield" name="firstfield" value="100" type="text" />
    <input id="secondfield" name="secondfield" value="200" type="text" />
</form>

jQuery:

jQuery(document).ready(function() {
    $('#firstfield').keyup(function() {
      alert('Handler for firstfield .keyup() called.');
    });
    $('#secondfield').keyup(function() {
      alert('Handler for secondfield .keyup() called.');
    });
});

デモ: http://jsfiddle.net/KtSja/3/

このデモでは、最初のフィールドにカーソルを置いてから (何も変更せずに) タブ アウトすると、2 番目のフィールドで keyup イベントが発生します。つまり、最初のフィールドから 2 番目のフィールドにタブ移動しています。この動作は正しいですか? どうすればこれを防ぐことができますか? Shift + Tab も同様です。

ノート：

a) 他のすべてのキー (印刷可能および印刷不可) は、最初のフィールドで keyup イベントをトリガーすると思います。

b) 両方のフィールドから出るまでタブを押し続けた場合、イベントはまったくトリガーされません。

4

4 に答える 4

14

キーのデフォルト アクションはkeydownイベント中に実行されるため、当然のことながら、keyup伝播するまでに、Tab キーはフォーカスを次のフィールドに変更します。

以下を使用できます。

jQuery(document).ready(function() {
    $('#firstfield, #secondfield').on({
        "keydown": function(e) {
            if (e.which == 9) {
                alert("TAB key for " + $(this).attr("id") + " .keydown() called.");
            }
        },
        "keyup": function(e) {
            if (e.which != 9) {
                alert("Handler for " + $(this).attr("id") + " .keyup() called.");
            }
        }
    });
});

これにより、Tab キーが押された場合に、他のキーを処理する前に必要な調整を行うことができます。例については、更新されたフィドルを参照してください。

編集

ご意見を参考に、機能を改良しました。JavaScript は少し複雑になりましたが、説明できるように最善を尽くします。こちらの新しいデモに従ってください。

jQuery(document).ready(function() {
    (function($) {
        $.fn.keyAction = function(theKey) {
            return this.each(function() {
                if ($(this).hasClass("captureKeys")) {
                    alert("Handler for " + $(this).attr("id") + " .keyup() called with key "+ theKey + ".");
                    // KeyCode dependent statements go here.
                }
            });
        };
    })(jQuery);

    $(".captureKeys").on("keydown", function(e) {
        $("*").removeClass("focus");
        $(this).addClass("focus");
    });
    $("body").on("keyup", "*:focus", function(e) {
        if (e.which == 9) {
            $(".focus.captureKeys").keyAction(e.which);
            $("*").removeClass("focus");
        }
        else {
            $(this).keyAction(e.which);
        }
    });
});

基本的に、class="captureKeys"キープレスを監視したい要素に与えます。最初にその 2 番目の関数を見てkeydownください。要素の 1 つで が起動さcaptureKeysれると、 というダミー クラスが与えられfocusます。これは、最新の要素を追跡して焦点を当てるためのものです (.focusデモでは、視覚的な補助として背景を示しています)。したがって、どのキーが押され.focusても、それが押された現在の要素にはクラスが与えられます.captureKeys。

次に、が(要素だけでなく) 任意の場所keyupで起動されると、関数はそれがタブであったかどうかを確認します。そうであった場合、フォーカスは既に移動しており、最後にフォーカスを持っていた要素でカスタム関数が呼び出されます ( )。タブでない場合は、現在の要素で呼び出されます (ただし、 がある場合のみ)。.captureKeys.keyAction().focus.keyAction().captureKeys

これにより、必要な効果が得られるはずです。theKey関数内で変数を使用して、押されたキーをkeyAction()追跡し、それに応じて動作させることができます。

これに関する 1 つの主な注意点:要素が DOM の最後の要素である場合、.captureKeys Tab を押すと、ほとんどのブラウザーでドキュメントからフォーカスが削除され、keyupイベントは決して発生しません。これが、デモの下部にダミー リンクを追加した理由です。

これは基本的なフレームワークを提供するので、ニーズに合わせて変更するのはあなた次第です。それが役に立てば幸い。

于 2013-08-02T15:06:07.367 に答える
5

これは予期される動作です。起こっている一連の出来事を見ると：

  1. フォーカスが最初のテキスト ボックスにあるときに Tab キーを押す
  2. 最初のテキスト ボックスでキーダウン イベントをトリガーする
  3. フォーカスを 2 番目のテキスト ボックスに移動
  4. タブキーから指を離す
  5. Keyup イベントは 2 番目のテキスト ボックスでトリガーされます

キーアップは 2 番目のテキスト ボックスに対して発生します。これは、フォーカスがその入力に移動したために発生した場所であるためです。

この一連のイベントが発生するのを防ぐことはできませんが、イベントを調べてどのキーが押されたかを確認し、preventDefault()それがタブ キーかどうかを呼び出すことができます。

于 2013-08-02T15:05:56.163 に答える