Question

8

blur event.relatedTarget returns null

rated 0 times [ 9] [ 1] / answers: 1 / hits: 30150 / 7 Years ago, mon, march 13, 2017, 12:00:00

I have an <input type=text> field and I need to clear it when this field loses focus (whiech means that user clicked somewhere on the page). But there is one exception. Input text field should't be cleared when user clicks on a specific element.

I tried to use event.relatedTarget to detect if user clicked not just somewhere but on my specific <div>.

However as you can see in snippet below, it simply doesn't work. event.relatedTarget is always returning null!

function lose_focus(event) {

  if(event.relatedTarget === null) {

    document.getElementById('text-field').value = '';

  }

}

.special {

  width: 200px;

  height: 100px;

  background: #ccc;

  border: 1px solid #000;

  margin: 25px 0;

  padding: 15px;

}

.special:hover {

  cursor: pointer;

}

<input id=text-field type=text onblur=lose_focus(event) placeholder=Type something...>



<div class=special>Clicking here should not cause clearing!</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryanulyssesb

Add To Favorites

Follow

Total Points: 91

Total Questions: 105

Total Answers: 102

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

ryanulyssesb questions

1 Vue 3: `defineProps` are referencing locally declared variables

Sat, Nov 13, 21, 00:00, 3 Years ago

1 How to put file path in package.json file

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to test dynamic imports (then and catch) with Jest

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Sending data from Python to Javascript using EEL

Mon, Mar 9, 20, 00:00, 4 Years ago

1 SyntaxError: Unexpected token / in JSON at position 132

Sun, Jul 7, 19, 00:00, 5 Years ago

View All

answered 7 Years ago breanab · Accepted Answer

Short answer: add tabindex=0 attribute to an element that should appear in event.relatedTarget.

Explanation: event.relatedTarget contains an element that gained focus. And the problem is that your specific div can't gain a focus because browser thinks that this element is not a button/field or some kind of a control element.

Here are the elements that can gain focus by default:

<a> elements with href attribute specified

<link> elements with href attribute specified

<button> elements

<input> elements that are not hidden

<select> elements

<textarea> elements

<menuitem> elements

elements with attribue draggable

<audio> and <video> elements with controls attribute specified

So event.relatedTarget will contain above elements when onblur happens. All other elements will are not counted and clicking on them will put null in event.relatedTarget.

But it is possible to change this behaviour. You can 'mark' DOM element as element that can gain focus with tabindex attribute. Here is what standart says:

The tabindex content attribute allows authors to indicate that an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation and, optionally, to suggest where in the sequential focus navigation order the element appears.

So here is the corrected code snippet:

function lose_focus(event) {

  if(event.relatedTarget === null) {

    document.getElementById('text-field').value = '';

  }

}

.special {

  width: 200px;

  height: 100px;

  background: #ccc;

  border: 1px solid #000;

  margin: 25px 0;

  padding: 15px;

}

.special:hover {

  cursor: pointer;

}

<input id=text-field type=text onblur=lose_focus(event) placeholder=Type something...>



<div tabindex=0 class=special>Clicking here should not cause clearing!</div>