web-dev-qa-db-ja.com

jQuery：ドキュメント全体でキー入力機能をトリガーしますが、入力およびテキストエリア内ではありませんか？

私はこれを持っています...

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

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

javascriptjquerykeypress
46
matt

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

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

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

81
adeneo

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

Code demo

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

追伸 jQueryイベントオブジェクトのドキュメント を参照して、公開されるプロパティを確認してください。

13
nbrooks

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/

5
Esailija

最も簡単で完璧なソリューションは次のとおりです。

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