tags:

views:

228

answers:

3

How can I, in a standard way, detect when focus leaves an element or any of its child elements.

blur won't do since it's fired when the focus goes into a child element.

IE provides the incredibly useful event focusout for this (it's like blur, but bubbles), but How can I do it in a standard way, except for attaching a blur handler to all the child elements?

Edit: apparently I was not clear about what I meant.

I have a structure like this:

<div id="parent">
    <input type="text" id="child1">
    <div id="child2" tabindex="0">yada</div>
</div>
<input type="text" id="outside"/>

I want to attach an event handler to parent to find out when focus leaves any of its child elements (child1 and child2) to go to an element outside of parent, e.g. the one with id "outside". In IE I can do this by binding to the focusout event, but that event does not exist in Firefox (or in the W3C DOM).

+1  A: 

I'll go ahead and suggest the Javascript OnBlur event, but please feel free to clarify if that's not what you were looking for. Depending on how you mean "or any of it's child elements," the answer might be different.

anschauung
A: 

I ended up creating the jQuery focus plugin to solve this issue, in case anyone runs into the same problem.

erikkallen
A: 

Would you have a simple example of how the jQuery focus plugin works? It would seem to solve the focus detection problem, but reading the plugin code unfortunately doesn't make its setup obvious.

Ville
Sorry, the link was directly to the release. Try the updated link, which should take you to the plugin page which contains a short description.
erikkallen
Thanks! The plugin works perfectly!
Ville