Обнаружить фокус, инициированный клавишей табуляции?

Я хочу определить событие фокусировки элемента, но только если оно было инициировано пользователем, нажимая клавишу табуляции. Например:

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

Если пользователь сфокусирован на #foo и нажимает Tab, я хочу, чтобы событие срабатывало один раз, когда #detect становится сфокусированным (или условным внутри события фокусировки, чтобы оно было истинным). И наоборот, если пользователь просто нажимает на поле #detect, чтобы сфокусировать его, я не хочу, чтобы событие срабатывало (или я хочу, чтобы условие внутри вызова события фокусировки было ложным).

Я не хочу использовать событие keydown #foo и проверять, была ли нажата клавиша табуляции, так как я хочу, чтобы этот подход не зависел от какого-либо другого элемента.

Я просмотрел вывод консоли из следующего кода, но не заметил никаких реальных различий между двумя методами фокусировки:

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

(fiddle)

Можно ли сделать это относительно простым способом?

Ответы

Ответ 1

Я знаю, что вы приняли ответ, но вы можете протестировать кнопку нажатой, используя следующее:

$('#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/

Ответ 2

Более отзывчивым решением будет использование двух слушателей:

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

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

Скрипка, показывающая разницу в скорости:

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

Ответ 3

Как вы заметили, сам объект события не отличает средства доступа. Что вы можете сделать, это связать прослушиватель mousedown, который будет срабатывать до focus, и установить некоторый флаг временной метки, который вы сравниваете с некоторым пороговым значением в вашем обработчике focus.

Ответ 4

Вы можете проверить событие фокусировки на конкретном входе с помощью этого кода

$(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);
    }
}

(скрипка)

Ответ 5

<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>