web-dev-qa-db-ja.com

タブキーによって開始されたフォーカスを検出しますか？

要素のフォーカスイベントを検出したいのですが、それはユーザーがTabキーを押して開始された場合のみです。例えば：

_<input type="text" id="foo" />
<input type="text" id="detect" />
_

ユーザーが_#foo_に焦点を合わせて押した場合 Tab、_#detect_がフォーカスされる（またはフォーカスイベント内の条件がtrueになる）とイベントが発生するようにします。逆に、ユーザーが_#detect_フィールドをクリックしてフォーカスするだけの場合、イベントを発生させたくない（またはフォーカスイベント呼び出し内の条件をfalseにしたい）。

アプローチを他の要素から独立させるため、_#foo_のkeydownイベントを使用してタブキーが押されたかどうかを確認したくありません。

次のコードのコンソール出力を調べましたが、2つのフォーカシング方法の間に実際の違いはありませんでした。

_$('#detect').on('focus', function(e){
   console.log(e); 
});
_

（ フィドル ）

これは比較的簡単な方法で達成できますか？

javascriptjqueryjavascript-eventsevent-handling
37
DC_

回答を受け入れたことは承知していますが、次の方法を使用して、押されたボタンをテストできます。

$('#detect').on('focus', function(e){
    $(window).keyup(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 9) {
           alert('I was tabbed!');
        }
    });
});

http://jsfiddle.net/LPGLm/1/

編集：リスナーを変更します：

$(window).keyup(function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 9 && $('#detect:focus').length) {
        alert('I was tabbed!');
    }
});

http://jsfiddle.net/LPGLm/7/

43
Pete

より応答性の高いソリューションは、2つのリスナーを使用することです。

var mousedown = false;
$('#detect').on('mousedown', function () {
    mousedown = true;
});

$('#detect').on('focusin', function () {
    if(!mousedown) {
        // logic
    }
    mousedown = false;
});

速度の違いを示すフィドル：

http://jsfiddle.net/u2y45/1/

7
Gary

お気づきのとおり、イベントオブジェクト自体はアクセス手段を区別しません。 canで行うことは、mousedownリスナーをバインドし、focusの前に起動し、focusハンドラーのしきい値と比較するタイムスタンプフラグを設定することです。

1
David Hedlund
<input type="text" id="foo" />
<input type="text" id="detect" />
<script>
 $("#foo").on('keyup', function(){    
   document.getElementById("detect").value = "007";  
    alert("your tab active successfully");  
   });  
 </script>
0
Purvesh Tejani

このコードにより、特定の入力のフォーカスイベントを確認できます。

$(window).on('keyup', function(event){
    if(event.keyCode == '9'){

      getFocused(event);
    }

})
var focused = 0;
function getFocused(e){
var ida =  $(':focus').eq(0).prop('id');
    if(ida=='detect' && focused==0){
        focused = 1;
        console.log(e);
    }
}

（フィドル）

0
user617263