如何检查我的元素 ID 是否有焦点？

假设我有下面的 div，它在满足某个条件后获得焦点:

<div id="myID" tabindex="-1" >Some Text</div>

我想创建一个处理程序来检查 div 是否有焦点，当它的值为 true/focus 时，执行一些操作(在下面的例子中，打印一个控制台日志) :

if (document.getElementById('#myID').hasFocus()) {
$(document).keydown(function(event) {
if (event.which === 40) {
console.log('keydown pressed')
}
});
}

我在控制台收到一个错误消息，说:

TypeError: 无法读取 null 的“ hasFocus”属性

知道我哪里做错了吗? 是不是我传递 div ID 的方式有问题？

226169 次浏览
小开

使用 document.activeElement

应该可以。

P.S getElementById("myID")不是 getElementById("#myID")

小开

如果您想使用 jquery $("..").is(":focus")。

你可以看看这个 栈

小开

这是一个块元素，为了让它能够接收焦点，您需要向它添加 tabindex属性，如

<div id="myID" tabindex="1"></div>

Tabindex 将允许此元素接收焦点。使用 tabindex="-1"(或者干脆删除所有属性)来禁止这种行为。

然后你就可以

if ($("#myID").is(":focus")) {...}

或者使用

$(document.activeElement)

正如之前建议的那样。

小开

将 document.activeElement与要检查焦点的元素进行比较。如果它们相同，则元素是聚焦的; 否则不是。

// dummy element
var dummyEl = document.getElementById('myID');


// check for focus
var isFocused = (document.activeElement === dummyEl);

hasFocus 是 document的一部分; 对于 DOM 元素没有这样的方法。

此外，document.getElementById在 myID的开头不使用 #。更改如下:

var dummyEl = document.getElementById('#myID');

回到这里:

var dummyEl = document.getElementById('myID');

如果您想使用 CSS 查询，您可以使用 querySelector(和 querySelectorAll)。

小开

在脚本中编写下面的代码，并添加 jQuery 库

var getElement = document.getElementById('myID');


if (document.activeElement === getElement) {
$(document).keydown(function(event) {
if (event.which === 40) {
console.log('keydown pressed')
}
});
}

谢谢。


提交答案