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?

Possible duplicate of [Javascript detect if input is focused](https://stackoverflow.com/questions/17614844/javascript-detect-if-input-is-focused) — Mohammad, Nov 19 '18 at 07:34
[`ancestorElement:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)? — David Thomas, Nov 19 '18 at 07:55
`Array.from(document.querySelectorAll(selector)).some(node => node.contains(document.activeElement))` maybe. — Felix Kling, Nov 19 '18 at 07:58
@FelixKling : Perfect. I think this is the solution, that i was looking for. Thank you — Marc Gerrit Langer, Nov 19 '18 at 08:01
Actually using `:focus` or `:focus-within` is better and easier. — Felix Kling, Nov 19 '18 at 08:06

score 76 · Answer 1 · answered Apr 12 '19 at 06:09

76

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.

answered Apr 12 '19 at 06:09

Northern

1,968
1
16
19

score 17 · Answer 2 · answered Aug 05 '20 at 18:27

17

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');

answered Aug 05 '20 at 18:27

Nagy Zoltán

389
3
6

1

This one is really precise and simple. The only drawback is probably lack of IE <9 support, which is quite acceptable nowadays. – Kostiantyn Ko Jun 23 '21 at 20:22

Mohammad · Answer 3 · 2020-02-28T15:42:12.027

9

Use CSS :focus pseudo-class in querySelectorAll()

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

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

edited Feb 28 '20 at 15:42

answered Nov 19 '18 at 08:02

Mohammad

20,339
15
51
79

Can you explain why you put it inside a setTimeout? Thanks! – carl-johan.blomqvist Dec 16 '19 at 09:58
1

@carl-johan.blomqvist It is just for better understanding! For testing code you need to focus/unfocus on input. So timeout return response after 2 seconds – Mohammad Dec 17 '19 at 07:48
Maybe your example could use a different id than `div`, that was a bit confusing – Aaron Beall Feb 27 '20 at 21:10

Adam Šipický · Answer 4 · 2020-10-22T14:50:16.977

If you have issue where document.activeElement is returning <body> element after blur event, you just need to wrap it with setTimeout() and it will return correct element.

handleBlur() {
    setTimeout(() => { 
        console.log(document.activeElement); // this actually return active/focused element
    });
}

if you are using it standalone without timeout

handleBlur() {
    console.log(document.activeElement); // this is returning <body> element
}

score 3 · Answer 5 · answered Jul 03 '21 at 23:22

Depending on your situation, using events might be more performant.

You can use the focusin and focusout events in that case.

const el = document.getElemen
el.addEventListener("focusin", () => alert("focus!"));
el.addEventListener("focusout", () => alert("blur!"));

score 1 · Answer 6 · answered Jun 21 '21 at 15:46

Here's a working example following @Northern and @Adam Šipický answers...

const tr = document.querySelector("table tbody tr");

tr.addEventListener('blur', () => {
  setTimeout(() => {
    if (!tr.contains(document.activeElement)) {
      // Execute your condition code here...
    }
  }, 200);
}, true);

score 1 · Answer 7 · answered Jul 10 '21 at 16:11

Combined some of answers posted here. Using a combination of focusin, focusout, contains and relatedTarget, you should be able to know when focus is on the children of a particular element.

const elm = document.getElementById('check-focus-here')
elm.addEventListener('focusin', (event) => {
  console.log(event.target, event.relatedTarget)
  // console.log(elm.contains(event.relatedTarget))
})

elm.addEventListener('focusout', (event) => {
  console.log(event.target, event.relatedTarget)
  console.log(elm.contains(event.relatedTarget))
})

#check-focus-here {
  border: 2px solid;
  padding: 8px;
  margin: 8px;
}

<div id="check-focus-here">
  <input id="first-name" type="text" />
  <input id="middle-name" type="text" />
  <input id="last-name" type="text" />
  <button type="button">Save Name</button>
</div>

<button type="button">Tab to this for outside focus</button>

score 0 · Answer 8 · answered Aug 16 '21 at 13:24

In 2021 you can probably avoid javascript altogether to check if an element or any of the element's child nodes have focus – unless you are manipulating DOM elements outside of a parent element.

For example:

<div class="parent">
  <button>foo</button>
  <button>food</button>
  <button>foosh</button>
</div>

.parent { background: white }
.parent:focus-within { background: red }
.parent:focus-within button:not(:focus) { opacity: .5 }

omri_saadon · Answer 9 · 2018-11-19T07:53:59.763

-1

To retrieve the selected element you can use:

let activeElement = document.activeElement

To check a specific element:

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

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

edited Nov 19 '18 at 07:53

answered Nov 19 '18 at 07:34

omri_saadon

9,513
6
31
58

1

I know this. But this solves not my problem. I want to know, if the active element is somewhere inside my element. – Marc Gerrit Langer Nov 19 '18 at 07:45
You can get the element via `getElementById ` and check if this is the `activeElement`. Added to my answer. @MarcGerritLanger – omri_saadon Nov 19 '18 at 07:54

How to check if element has focused child using javascript?

9 Answers9

Linked