JavaScriptDOM: how to prevent blur event if focus is lost to another window (application) - Stack Overflow

admin管理员组

文章数量:1399949

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) bees 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!

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) bees 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!

• javascript
• dom
• focus
• blur

Share Improve this question Follow edited Mar 3, 2018 at 15:51 Binarus asked Jul 8, 2014 at 17:32 BinarusBinarus 4,44533 gold badges3131 silver badges5050 bronze badges 6

• add if(!document.hasFocus()){return;} to the top of your blur() handler – dandavis Commented Jul 8, 2014 at 17:35
• Thanks for the suggestion. I already had tried that, but unfortunately, document.hasFocus() returns true when called from within the blur handler (I have attached that handler to the input field - is this a mistake?). – Binarus Commented Jul 8, 2014 at 18:06
• you can likely use the old event-misorder cop-out; a setTimeout around the meat of the handler. – dandavis Commented Jul 8, 2014 at 18:07
• I just have tried: Your first suggestion seems to work if I attach the blur handler to the window object! So I'll try to change the handler accordingly (should be feasible by using event.xxtargetxx properties). I'll report tomorrow if I could get this to work. – Binarus Commented Jul 8, 2014 at 18:16
• One more question: When I attach the blur handler to the document object (instead of the window object), it seems to be called twice when activating another application's window. Any ideas why this happens (in FF30 / Win 7)? – Binarus Commented Jul 8, 2014 at 18:17

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 8

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;
    ...
}

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 e 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.

本文标签： JavaScriptDOM how to prevent blur event if focus is lost to another window (application)Stack Overflow