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

Question

假设我有以下div在满足某个条件后获得焦点:

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

我想创建一个处理程序,检查该div是否具有焦点,当它评估为true/focus在div上时,执行某些操作(在下面的示例中,打印控制台日志):

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

我在控制台中收到一条错误消息:

TypeError:无法读取null的属性'hasFocus'

知道我在这里做错了吗？也许我传递div Id的方式？

Answer 1

document.activeElement与要检查焦点的元素进行比较.如果它们是相同的,则元素是集中的; 否则,它不是.

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

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

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

另外,在开头document.getElementById不使用a .改变这个:#myID

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

对此:

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

如果您想使用CSS查询,则可以使用querySelector(和querySelectorAll).

Answer 2

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

你可以看看这个堆栈

Answer 3

使用 document.activeElement

应该管用.

PS getElementById("myID")没有getElementById("#myID")

Answer 4

这是一个块元素，为了使其能够获得焦点，您需要向其添加tabindex属性，如下所示：

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

Tabindex将允许该元素获得焦点。使用tabindex="-1"（或实际上，完全摆脱该属性）来禁止这种行为。

然后您可以简单地

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

或使用

$(document.activeElement)

如前所述。