Question

之前已经问过here，但几年前，当时没有跨平台的解决方案（除了setTimeout解决方案，这真的不是很方便）。< / p>

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

我正在使用常规的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上的working example。

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

Answer 4

2020年：所有主流浏览器（台式机和移动设备）都支持FocusEvent.relatedTarget。

Answer 5

event.relatedTarget 找不到新聚焦的元素（在我的例子中是 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.. 和等等）

如何确定重点在哪里？

5 个答案: