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 withhref
attribute specified<link>
elements withhref
attribute specified<button>
elements<input>
elements that are nothidden
<select>
elements<textarea>
elements<menuitem>
elements- elements with attribue
draggable
<audio>
and<video>
elements withcontrols
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>