Comment vérifier si l'élément a focalisé l'enfant en utilisant javascript?

Question

J'essaie de supprimer tous les jQuery de mon code. Jusqu'à présent, j'ai utilisé

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

pour distinguer si le focus est à l'intérieur d'un de mes éléments. Pouvez-vous me montrer une façon de le faire sans jQuery?

Answer 1

Vous pouvez utiliser Node.contains méthode DOM native pour cela.

el.contains(document.activeElement);

vérifiera si activeElement est un descendant de el. Si vous avez plusieurs éléments à vérifier, vous pouvez utiliser une fonction some pour itérer.

Answer 2

Utiliser CSS :focus pseudo-classe dans 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 3

Pour récupérer l'élément sélectionné, vous pouvez utiliser:

let activeElement = document.activeElement

Pour vérifier un élément spécifique:

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

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