如何检查元素ID是否有焦点?(复制)

This question already has an answer here:

这个问题已经有了答案:

How do I find out which DOM element has the focus? 17 answers
如何确定哪个DOM元素具有焦点?17个答案

Let's say I have the following div that gets focus after a certain condition is met:

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

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

I want to create a handler that checks whether or not that div has focus, and when it evaluates to true/focus is on the div, do something (in the example below, print a console log):

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

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

I'm getting an error message in the console that says:

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

TypeError: Cannot read property 'hasFocus' of null

类型错误:无法读取空属性'hasFocus'

Any idea what I'm doing wrong here? Maybe the way I'm passing the div Id?

知道我做错了什么吗?也许是我通过div Id的方式?

5 个解决方案

#1

Compare document.activeElement with the element you want to check for focus. If they are the same, the element is focused; otherwise, it isn't.

比较文档。使用要检查焦点的元素的activeElement。如果它们是相同的，元素就会集中;否则,它不是。

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

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

hasFocus is part of the document; there's no such method for DOM elements.

hasFocus是文档的一部分;DOM元素没有这样的方法。

Also, document.getElementById doesn't use a # at the beginning of myID. Change this:

此外,文档。getElementById在myID的开头不使用#。改变:

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

to this:

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

If you'd like to use a CSS query instead you can use querySelector (and querySelectorAll).

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

#2

If you want to use jquery $("..").is(":focus").

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

You can take a look at this stack

你可以看看这个堆栈。

#3

Use document.activeElement

使用document.activeElement

Should work.

应该工作。

P.S getElementById("myID") not getElementById("#myID")

P。年代getElementById(“myID”)不是getElementById(“# myID”)

#4

This is a block element, in order for it to be able to receive focus, you need to add tabindex attribute to it, as in

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

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

Tabindex will allow this element to receive focus. Use tabindex="-1" (or indeed, just get rid of the attribute alltogether) to disallow this behaviour.

Tabindex将允许该元素接收焦点。使用tabindex="-1"(或者干脆一起去掉属性)来禁止这种行为。

And then you can simply

然后你可以简单地

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

Or use the

或使用

$(document.activeElement)

As been suggested previously.

正如前面被提出。

#5

-3

Write below code in script and also add jQuery library

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

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

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

Thank you...

谢谢你！

#1