How to remove focus from activeElement when changing tabs (onfocus/onblur)?

focus, javascript, jquery, onblur, tabs

Solution

Ok. This works:

    window.onblur = function () {
      document.activeElement.blur();
    };

So it seemed the blur worked fine, because if I console `activeElemnt` before and after my call to `blur()` it switched from an INPUT to the BODY tag. Correctly, my body has it's class set to `FOOBAR`. Problem for me was that the text element still retained focus, but I assume this is due to some handler inside jQuery Mobile.

The above solution works the other way around. I remove focus of the `activeElement` when the user switches a tab. Works.

Problem

I'm trying to remove focus from a (jQuery Mobile) text input when a user switches tabs on desktop. While I can correctly identify the activeElement in the below console, I cannot edit any of its properties or remove its focus. This is what I'm doing: ``` // inside some init method window.onfocus = function () { // triggers console.log(document.activeElement); if (document.activeElement.tagName !== "BODY") { console.log("clear focus"); document.activeElement.blur(); document.activeElement.className = "FOOBAR"; } }; ``` When I'm on a form and focus a text input, then switch to another tab and go back to the tab with the form, the event listener triggers and my still active input is correctly logged. However that's it... I can't blur or edit any of the elements properties. Question: How do I correctly remove focus from the active element either on `window.onfocus` or `window.onblur`? Thanks! PS: it also does not work with jQuery: ``` $(window).on("focus", function () { $(document.activeElement).blur(); }); ``` and I'm looking for a JavaScript only solution. EDIT: `document.activeElement.blur()` works fine from the console, but not from my listener.

Original source