Как проверить, был ли элемент сфокусирован на дочернем элементе, используя JavaScript?

Question

Я пытаюсь удалить все jQuery из моего кода.До сих пор я использовал

if($(selector).find(':focus').length === 0){
  //focus is outside of my element
}else{
  //focus is inside my element
}

, чтобы определить, фокус находится внутри одного из моих элементов .Можете ли вы показать мне способ сделать это без jQuery?

Answer 1

Использовать CSS :focus псевдокласс в querySelectorAll()

setTimeout(function(){
  if (document.querySelectorAll("div :focus").length === 0)
    console.log("not focused");
  else
    console.log("focused")
}, 2000);

<div id="div">
  <input type="text">
</div>

Answer 2

Для этого вы можете использовать Node.contains собственный метод DOM.

el.contains(document.activeElement);

проверит, является ли activeElement потомком el.Если у вас есть несколько элементов для проверки, вы можете использовать функцию some для итерации.

Answer 3

Для извлечения выбранного элемента вы можете использовать:

let activeElement = document.activeElement

Для проверки определенного элемента:

let elem = document.getElementById('someId');

let isFocused = (document.activeElement === elem);