JavaScript / DOM: how to prevent blur event if focus is lost to another window (application)

Question

I want to show certain content within an HTML document if the user clicks into a certain form field within this document, and I want to hide that certain content if the user leaves that form field (either by activating another one or by clicking somewhere else onto the page).

I have tried to implement that behavior using the focus and blur events. This works in principle, but there is a problem: The blur event on the respective field is fired not only when the user moves the focus within the same document, but as well when another window (which could be from a different application) becomes activated (gets focus).

How could I avoid that? I don't want to see any changes in the page if the focus goes to a different application (or another browser window or tab).

Thank you very much!

Answer 1

Guard the blur event handler with if ( document.activeElement === this ) { return; }.

The next step will be to prevent the focus event handler from activating when the window regains focus. This can be done using a small pattern:

function onFocus(e) {
    if ( this._isFocused ) { return; }
    this._isFocused = true;
    ...
}

function onBlur(e) {
    if ( document.activeElement === this ) { return; }
    this._isFocused = false;
    ...
}

Answer 2

Maybe this could work:

function onFocus(element) {
    document.getElementById('element').doStuffHere('whateverYouWant');
}

function onBlur(element) {
    if (document.hasFocus()) {
        document.getElementById('element').doStuffHere('whateverYouWant');
    } else {
        alert('Please come back!')
    }
}

The onBlur() function is executed as soon as the element loses focus and first checks if the document still has the focus. If yes it does the elementLostFocus tasks (I'll call them like that here to make it easy), otherwise it (at least in this example) alerts the user, or you can make it do nothing or just the same elementLostFocus tasks or anthing you want.

The only problem with that solution is that you don't do the elementLostFocus tasks when the window regains focus by clicking outside the desired element after it lost the focus directly from the desired element to another window. But here's a fix for that:

document.onfocus = function() { 
    if (document.getElementById('element').hasFocus() == false) {
       document.getElementById('element').doStuffHere('whateverYouWant');
    }
} 

It can be that that code doesn't work but it should. At least it should give you an idea based on which you can solve the problem yourself.