How to check if element has focused child using javascript?

Question

I'm trying to remove all jQuery from my code. Until now I used

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

to distinguish wether the focus is inside of one of my elements. Can you show me a jQuery-free way of doing it?

Answer 1

You can use Node.contains native DOM method for this.

el.contains(document.activeElement); 

will check if activeElement is a descendant of el. If you have multiple elements to check, you can use a some function to iterate.

Answer 2

It is possible with Element's matches() method and with a simple selector string as follows:

let hasFocused = elem.matches(':focus-within:not(:focus)'); let focusedOrHasFocused = elem.matches(':focus-within');