How to distinguish for which object (form field or whole window) the blur event really occurred (in Firefox)?

I am having a really hard time figuring out how to find out the real cause for a blur event in Firefox.

Background: I have a form which dynamically shows an appropriate help text when the user clicks (or tabs) to a field. Every field is associated with another help text, so the help text for one field must go away if another field gets the focus.

The problem:
– If the user clicks (or tabs to) any element other than one of the form fields, but within the active browser window, I want any help text to go away (this is a logical choice since then there is no active form field any longer, so showing a help text does not make sense in that situation).
– But if the document / the window itself loses focus, for example because the user activates another application, another browser window or tab or just clicks into the address bar, I do NOT want the help text which currently is active (if any) to go away (this is also logical because such actions should not change the state of the application, so the application should be kept exactly as is).

I’ve got this working in IE and Chrome, but thanks to Firefox’s brain-dead implementation of the blur event (which seems to be fired on the window object in any case, even when the windows keeps focus), and thanks to the fact that focusin and focusout is not implemented in Firefox although a respective bug is open since nearly 4 years now, I’ve no solution for Firefox yet.

I would be very grateful if somebody could tell me how to solve this problem. Currently, I am basically doing something like (for debugging purposes):

HTML:

<input id="foo" type="text" />
<!-- The following div is invisible when loading the document -->    
<div id="explain" class="invisible"> bla </div>

Javascript:

function BlurHandler(e) {

  var l_ID;

  if ("id" in e.target) {

    /* Note: No HTML element except the form field has been assigned an ID */
    alert("Field");
  }    
  else if (e.target === window) {    
    alert("Window");
  }

  return;
}

window.addEventListener("blur", BlurHandler, true);
document.getElementById("foo").addEventListener("blur", BlurHandler, true);

I have also tried combinations of: comment out one of the lines which add the event listeners, change the last parameter of addEventListener from true to false.

When the input field has the focus and I click in the white space of the HTML document, Firefox still fires the blur event for the window object; to make things worse, this happens before the blur event is fired for the input field object.

Any ideas?

P.S. I won’t use a framework like jQuery for this project, so I am highly interested in pure Javascript solutions.


Source: javascript

Leave a Reply