如何检查我的 Element ID 是否有焦点？ [复制]答案

【问题标题】：How can I check if my Element ID has focus? [duplicate]如何检查我的 Element ID 是否有焦点？ [复制]
【发布时间】：2016-07-25 15:24:29
【问题描述】：

假设我有以下 div 在满足特定条件后获得焦点：

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

我想创建一个处理程序来检查该 div 是否具有焦点，并且当它评估为 true/焦点在 div 上时，执行一些操作（在下面的示例中，打印控制台日志）：

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

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

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

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

【问题讨论】：

见话题stackoverflow.com/questions/497094/…
不知道为什么这被标记为重复（另一个主题提出了一个完全不同的问题），但今天我们可以使用matches() 方法。 var el = document.getElementById('myElement'); el.matches(':focus'); // If it has focus, it will return true.

标签： javascript jquery html

【解决方案1】：

将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）。

【讨论】：

为什么不只是document.activeElement.id=='myID'？

【解决方案2】：

使用document.activeElement

应该可以。

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

【讨论】：

也可以改用document.querySelector("#myID")

【解决方案3】：

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

你可以看看这个stack

【讨论】：

【解决方案4】：

这是一个块元素，为了让它能够获得焦点，你需要给它添加tabindex属性，如

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

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

然后你可以简单地

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

或者使用

$(document.activeElement)

如前所述。

【讨论】：

还要指出getElementById中的错字。
谢谢。我已经分配了一个 -1 的 tabindex。 $(document.activeElement) 方法有效，但它并不特定于我正在检查焦点的 div ('myID')。它在任何 div 有焦点时触发 if 语句，而不仅仅是我关心的那个 ('myID')
jQuery 方法根本不起作用
@KunalOjha 是的，只要有活动元素，它就会触发，检查它是否是您需要的元素是您的工作。所以，你会这样做 if ($(document.activeElement).is('#myID')) {...} 另外，当你将 tabindex 设置为 -1 时，disables 是那个特定元素上的焦点事件，您需要将其设置为 1 或任何其他数字。
还是不行：/

【解决方案5】：

在脚本中编写以下代码并添加 jQuery 库

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

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

谢谢...

【讨论】：