OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

JavaScript FocusOut - get the element that receives focus

  • Thread starter Thread starter Peter M.
  • Start date Start date
P

Peter M.

Guest
When the FocusOut event is raised, how do you know which element receives the focus?

The correct way seems to be to use the event's relatedTarget property. However, this seems not to work in all browsers:

  • in Google Chrome, it works
  • in Firefox and Internet Explorer, the relatedTarget is null
  • in Safari, the relatedTarget property doesn't even exist

I have found a workaround which works only in IE (using document.activeElement), but I'm wondering if there isn't a general solution that has proven to work in all major browsers.

Although I can find similar questions and answers, I haven't found any solution which really works in all browsers.

EDIT: the example below shows what I mean.

Code:


Code:
document.getElementById('text1').addEventListener('focusout', function(e) {
  // At this point, I want to know which element is receiving the focus (i.e. text2)
  console.log(e.relatedTarget); // works in Chrome
  console.log(document.activeElement); // works in IE
  // both do not work in Firefox or Safari
});

Code:
<input id="text1" type="text" value="first" />
<input id="text2" type="text" value="second" />

<p>When the <b>FocusOut</b> event is raised, how do you know <b>which element receives the focus</b>?</p>

<p>The correct way seems to be to use the event's <b>relatedTarget</b> property. However, this seems not to work in all browsers:</p>

<ul>
<li>in Google Chrome, it works</li>
<li>in Firefox and Internet Explorer, the relatedTarget is null</li>
<li>in Safari, the relatedTarget property doesn't even exist</li>
</ul>

<p>I have found a workaround which works only in IE (using document.activeElement), but I'm wondering if there isn't a <b>general solution that has proven to work in all major browsers</b>.</p>

<p>Although I can find similar questions and answers, I haven't found any solution which really works in all browsers.</p>

<p>EDIT: the example below shows what I mean.</p>

<p>Code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('text1').addEventListener('focusout', function(e) {
// At this point, I want to know which element is receiving the focus (i.e. text2)
console.log(e.relatedTarget); // works in Chrome
console.log(document.activeElement); // works in IE
// both do not work in Firefox or Safari
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><input id="text1" type="text" value="first" />
<input id="text2" type="text" value="second" /></code></pre>
</div>
</div>
</p>
 

Latest posts

Top