Onblur and Focus issue when returning from outside window

Question

Steps to reproduce the problem:

Note: Create two inputs with names and a console.log("Test Focus In" + element.getAttribute("name")) and console.log("Test Blur" + element.getAttribute("name")) in the focusin and blur event for each input.

1. Click the first element

2. Click the second element

3. Click the first element

4. Click outside chrome

5. Click the second element inside chrome.

What is the expected behavior?

LOG:

• Test Focus In FirstElement
• Test Blur FirstElement
• Test Focus In SecondElement
• Test Blur SecondElement
• Test Focus In FirstElement
• Test Blur FirstElement
• Test Focus In SecondElement

What went wrong?

BUT THIS HAPPEN LOG:

• Test Focus In FirstElement

• Test Blur FirstElement

• Test Focus In SecondElement
• Test Blur SecondElement
• Test Focus In FirstElement
• Test Blur FirstElement

• Test Focus In FirstElement When entering the windows immediately trigger Focusin and blur for the last element before leaving the window.

• Test Blur FirstElement

• Test Focus In SecondElement

Answer 1

I am not 100% sure but input elements and in general html elements are threated as part of whole UI system. Simply if you change browser tab it means you changed focused element from your window to some other application or system control. I can be completely wrong but even if I am wrong, this means not only google chrome has this issue.

For me this is like you wanted to keep selected file in windows explorer all the time even when you select other file in other explorer - actually when you switch window the behavior is similar to your answer above.

---

Preventing this is probably not possible, however depending on your use case you can probably take another approach. There are few things you can do:

Checking activeElement

This can be solution for your problem. You can check if your element is activeElement and then you are sure event is called not when user click outside. Here is very the same question (as yours) and explained solution.

field.blur(function() {
    if(document.activeElement !== this) {
         // this is a blur that isn't a window blur
    }
});

I did not try but maybe you can combine it with document.hasFocus()

Page Visibility API

You can check if browser tab is focused by page visibility api explained in this question. Unfortunely this does not allow to check if brower window lose focus but if user changed tab or switched to another application.

Document on blur

It can be case that you have to do something when your document is focused or blured:

    $( document ).on("focus", function(e){
        console.log("focus");
    });
    $( document ).on("blur", function(e){
        console.log("blur");
    });

This works perfectly for tab or app change and for click outside but does not allow you to prevent blur for input - even if you change bubbling to capturing.

Document hasFocus

This allows you to check if your document is focused what is similar to document blur event. You can see example here