检测由tab键启动的焦点？

Question

我想检测元素的焦点事件,但只有当用户按Tab键启动时才会检测到它.例如:

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

如果用户专注于#foo并按下Tab,我希望一旦#detect聚焦(或焦点事件内的条件为真)就触发事件.相反,如果用户只是单击该#detect字段来聚焦它,我不希望触发该事件(或者我希望焦点事件调用中的条件为假).

我不想使用keydown事件#foo并检查Tab键是否被按下,因为我希望该方法独立于任何其他元素.

我查看了以下代码的控制台输出,但没有注意到两种聚焦方法之间的任何真正差异:

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

(小提琴)

这有可能以一种相对简单的方式完成吗？

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

Answer 2

一个响应更快的解决方案是使用两个监听器:

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

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

小提琴显示速度的差异:

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