如何判断焦点去哪里了？

Question

此处已提出此问题< /a> 之前，但是是几年前的事了，当时还没有跨平台的解决方案（除了 setTimeout 解决方案，这确实不是很方便）。

我想做 onblur="foo(parm);" 并让 foo 能够确定哪个元素现在具有焦点。

我正在使用常规的 javascript；请不要使用 jQuery。

如今这可能吗？

Answer 1

你可以尝试这样的事情：

function whereDidYouGo() {
    var all = document.getElementsByTagName('*');

        for (var i = 0; i < all.length; i++)
            if (all[i] === all[i].ownerDocument.activeElement)
                return all[i];
}

编辑：

function whereDidYouGo() { return document.activeElement; }

Answer 2

在 jQuery 中，应 OP 的要求：

$(':input').blur(function() {
    $focusedElement = $(':input:focus');
    //Do stuff with $focusedElement
}

Answer 3

有趣的问题。问题的核心是 - “焦点”事件何时触发，在模糊事件之前还是之后？如果它在模糊事件之前触发，问题很容易，因为您只需将当前焦点存储在模糊事件可以访问的变量中。

然而，至少在 Chrome 13 中，模糊事件似乎发生在焦点事件之前。一种可能的解决方案。

给定以下 HTML：

<input id="foo" value='foo' />
<input id="bar" value='bar' />

然后您可以：

var currentFocus;
var pendingBlur;

var foo = document.getElementById('foo');
foo.addEventListener('focus', function(){ 
    currentFocus = foo;
    if(pendingBlur !== undefined){
        pendingBlur();
        pendingBlur = undefined;
    }
});
foo.addEventListener('blur', function(){
    pendingBlur = function(){
        console.log('new focus:', currentFocus);
    };
});

var bar= document.getElementById('bar');
bar.addEventListener('focus', function(){ 
   currentFocus = bar;
   if(pendingBlur !== undefined){
        pendingBlur();
        pendingBlur = undefined;
   }
});
bar.addEventListener('blur', function(){
    pendingBlur = function(){
        console.log('new focus:', currentFocus);
    };
});

基本上，我只是不执行模糊回调，因此在我们知道哪个元素获得焦点后调用焦点事件会很方便。

这是 JSFiddle 上的工作示例。

编辑：此解决方案存在这样的问题：如果您通过单击其他表单元素之外的其他内容来模糊表单，则模糊事件永远不会触发（因为我们等待焦点事件）。我能想到的唯一解决方法是使用计时器来检查是否定义了pendingBlur，如果是，则调用它。此时您实际上不再需要焦点事件来调用模糊回调......

Answer 4

2020 年：所有主要浏览器（桌面版和移动版）均支持 FocusEvent。相关目标。

Answer 5

event.latedTarget 找不到新聚焦的元素（在我的例子中是 div 类型），但只返回 null 。

在元素上附加属性 tabindex="0" 后，现在它可以工作了。

<div id="myDiv">myDiv</div>
console.log(e.relatedTarget) // null

<div id="myDiv" tabindex="0"> tabindexed div </div>
console.log(e.relatedTarget) // <div id="myDiv" tabindex="0">

tabindex 是一个使元素可以使用键盘上的 Tab 键获得焦点的属性。我想这主要是为了网络可访问性。

我猜你不需要设置 tabindex 属性，只要焦点元素已经可以通过 Tab 键访问（例如 a、select< /代码>..等等）