Как проверить, имеет ли мой Element ID фокус?

Скажем, у меня есть следующий 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: Невозможно прочитать свойство hasFocus 'null

Любая идея, что я делаю неправильно здесь? Может быть, я передаю идентификатор div?

Ответ 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).

Ответ 2

Используйте document.activeElement

Должен работать.

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

Ответ 3

Если вы хотите использовать jquery $("..").is(":focus").

Вы можете взглянуть на это stack

Ответ 4

Это элемент блока, чтобы он мог получать фокус, вам нужно добавить к нему атрибут tabindex, как в

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

Tabindex позволит этому элементу получать фокус. Используйте tabindex="-1" (или действительно, просто избавитесь от атрибута alltogether), чтобы запретить это поведение.

И тогда вы можете просто

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

Или используйте

$(document.activeElement)

Как было предложено ранее.

Ответ 5

Запишите ниже код в script, а также добавьте библиотеку jQuery

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

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

Спасибо...