检测由 Tab 键启动的焦点？答案

【问题标题】：Detect focus initiated by tab key?检测由 Tab 键启动的焦点？
【发布时间】：2013-04-15 04:58:44
【问题描述】：

我想检测元素的焦点事件，但前提是它是由用户按 Tab 键启动的。例如：

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

如果用户关注#foo 并按下Tab，我希望在#detect 成为焦点后触发事件（或者焦点事件中的条件为真）。相反，如果用户只是单击#detect 字段来聚焦它，我不希望事件触发（或者我希望焦点事件调用中的条件为假）。

我不想使用 #foo 的 keydown 事件并检查是否按下了 tab 键，因为我希望该方法独立于任何其他元素。

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

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

(fiddle)

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

【问题讨论】：

标签： javascript jquery event-handling jquery-events

【解决方案1】：

正如您所注意到的，事件对象本身并不区分访问方式。您可以做的是绑定一个mousedown 侦听器，该侦听器将在focus 之前触发，并设置一些时间戳标志，与focus 处理程序中的某个阈值进行比较。

【讨论】：

嗯，这实际上很聪明。没想到，谢谢。
请注意，这区分了选项卡和单击，但它不会帮助您区分选项卡和.focus()，但是我不知道这是否是您想要的。如果您确实想要这样，也许您可以为tab 实现一个全局键监听器，并比较最新选项卡和焦点事件之间的接近程度，但这似乎……很费力。
确实看起来很辛苦。我不担心.focus() 触发我的事件，所以一切都应该像你最初指出的那样工作。再次感谢！

【解决方案2】：

我知道您已接受答案，但您可以使用以下方法测试按下的按钮：

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

【讨论】：

嗯，这实际上似乎是一个更好的解决方案。我取消选择了答案，我将暂缓选择。
您可能正在做某事，但您不在那里。每次 #detect 获得焦点时，将注册一个全局事件侦听器，它会在任何地方 查找选项卡。因此，如果通过在 #detect 内外单击并对其进行模糊处理 3 次聚焦并模糊它，然后单击 Tab 以使 #foo 获得焦点，您仍然会收到三个“我被选项卡”提醒。
已更改答案以获得更好的方法

【解决方案3】：

您可以通过此代码检查特定输入的焦点事件

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

(fiddle)

【讨论】：

【解决方案4】：

响应速度更快的解决方案是使用两个侦听器：

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

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

小提琴显示速度差异：

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

【讨论】：

【解决方案5】：

我使用以下：

(function() {
  const tabHistory = [];

  window.addEventListener('keyup', function (e) {
    const code = e.keyCode || e.which;
    const index = tabHistory.length === 0 ? 1 : tabHistory.length + 1;

    if (code == 9) {
      tabHistory.push({
        element: e.target,
        index
      });

      console.log(index, e.target, tabHistory);
    }
  });
})();

我建议跟踪关注的元素，这样可以确保用户能够按预期进行选项卡。

希望对你有帮助！

【讨论】：