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

Question

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.

Answer 1

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.