javascript - jQuery:ドキュメント全体でキープレス関数をトリガーしますが、入力とテキストエリア内ではトリガーしませんか?

Question

私はこれを持っています…</p>

$(document).keypress(function(e) {
        if ( e.keyCode === 119 ) // w
            doSomething();
    });

ドキュメントで「w」を押すと、doSomething()関数が起動します。inputフィールドまたはに現在入力中 (フォーカス中) に起動しないようにするにはどうすればよいtextareaですか?

Answer 1

このように、セレクタではなく、イベントの後に要素を除外する必要があります。

$(document).on('keypress', function(e) {
    var tag = e.target.tagName.toLowerCase();
    if ( e.which === 119 && tag != 'input' && tag != 'textarea') 
        doSomething();
});

これは、イベントの発生元の要素である のタグ名をチェックしevent.target、イベントが入力またはテキストエリアから発生していない場合にのみ関数を起動します。

Answer 2

イベント ハンドラーが にバインドされている場合document、イベントはすでに入力要素で発生し、html 要素にバブルアップされているため、ハンドラー自体のコード内で除外を処理する必要があります。もう 1 つの方法は、イベントがバブリングするのを防ぐ入力要素の 2 番目のハンドラーを明確にバインドすることですが、それはおそらく正しいアプローチではありません。

コードのデモ

$(function() {
    $(document).keypress(function(e) {
        if ($(e.target).is('input, textarea')) {
            return;   
        }
        if (e.which === 119) doSomething();
    });
});​

ps jQueryイベントオブジェクトのドキュメントを見て、それが公開するプロパティを確認できます。

Answer 3

jQuery では、e.whichは正規化されたプロパティであり、 ではありませんe.keyCode。

入力していないかどうかを確認するには、次を確認できますdocument.activeElement。

$(document).keypress(function(e) {
    if (e.which === 119 && !$(document.activeElement).is(":input,[contenteditable]")) {
        doSomething();
    }
});

デモ。http://jsfiddle.net/pxCS2/1/

Answer 4

最も簡単で完璧な解決策は次のとおりです。

$(document).keypress(function(e) {
    if (e.which == 119 && !$(':focus').length) {
        doSomething();
    }
});