I want to be able to detect when arbitrary elements loose focus in JavaScript, so I can build an in-line editing tool similar to jEdit. I can't depend on jQuery for this library, so I need a native method for doing it.

I looked at onblur, which would seem to be the right thing but MDN has a note that suggests it may be IE specific?

In contrast to MSIE--in which almost all kinds of elements receive the blur event--almost all kinds of elements on Gecko browsers do NOT work with this event.

Which elements will/wont work with this, is there a better way to detect such things?

If blur works, should the docs at .onblur be changed?

I want to be able to detect when arbitrary elements loose focus in JavaScript, so I can build an in-line editing tool similar to jEdit. I can't depend on jQuery for this library, so I need a native method for doing it.

I looked at onblur, which would seem to be the right thing but MDN has a note that suggests it may be IE specific?

In contrast to MSIE--in which almost all kinds of elements receive the blur event--almost all kinds of elements on Gecko browsers do NOT work with this event.

Which elements will/wont work with this, is there a better way to detect such things?

If blur works, should the docs at https://developer.mozilla/en-US/docs/DOM/element.onblur be changed?

• javascript
• html
• dom

Share Improve this question Follow edited Sep 18, 2012 at 23:31 ForbesLindesay asked Sep 18, 2012 at 23:12 ForbesLindesayForbesLindesay 10.7k33 gold badges5252 silver badges7676 bronze badges 2

• stackoverflow./questions/1529374/… – Robert Peters Commented Sep 18, 2012 at 23:20
• Post some code with the problem you're having. – Ruan Mendes Commented Sep 18, 2012 at 23:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can use an onfocusout on the body element. The difference between onblur and onfocusout is that the latter bubbles up, so you don't have to install it for every node that you want.

Related question: Detect which form input has focus using JavaScript or jQuery

In order to detect the loss of focus, for accessibility audits, I personally use the ugly bination of all the following:

(function($){

var focusCounter = 0;

/* Set focus outline (CSS, jQuery): */
$("*").on("focus","body",function(e){$(e.target).css("outline","5px solid orange");$(e.target).on("blur",function(e){$(e.target).css("outline","none");})});

/* Log keypress */
$(document).on('keydown',function(e){
    console.log("========= KEYDOWN ", e.key, " ==================");
});

/* Log currently focused element (On start) */
console.log("CURRENT: ",document.activeElement);

/* Log focused element (On focus) */
document.addEventListener("focus",function(){
    console.log(
        "[ " + (focusCounter++).toString() + " ]",
        "FOCUSED: ",
        "<" + document.activeElement.nodeName + ">",
        ($.trim($(document.activeElement).text())? $.trim($(document.activeElement).text()) : $.trim($(document.activeElement).val())).replace(/(\r\n|\n|\r)/gm, "").substring(0, 30) + '...',
        document.activeElement
    );

},true);

/* Try to detect loss of focus (Works in Chrome) */
document.addEventListener("focusout", function(event){console.log((!event.relatedTarget)?"⚠ FOCUS LOST":"");});

/* Fallback, checks in intervals if the focus is still active/lost e.g. if onfocus or onfocusout didn't work */
(function(){setInterval(function(){console.log('interval check: ',(document.body===document.activeElement)?"FOCUS LOST":"ok");},8500);})();

})(jQuery);

Idea: All of those I set as a bookmarklet so I can easily access it