How do I blur everything by focusing on the document?

using Jquery/javascript

Is it: $(document).focus()?

The .focus() method on a jQuery-wrapped element will bind to the onfocus event if a function is passed as the first parameter, or trigger attached event handlers with no parameter.

I’m not sure why you’re trying to do what you’re trying to do, but if you’re trying to blur the currently active element, no matter what element it is, you can use:


This isn’t advised though, as doing so will reset the tabbing order and potentially annoy keyboard-navigating users.

UPDATE: In Typescript you should just cast to HTMLElement like this:

(document.activeElement as HTMLElement).blur();
// or

Original answer is below.

The accepted answer won’t work in TypeScript because document.activeElement is an Element type, not HTMLElement, so it doesn’t technically support blur(). The below method is kind of hacky but it works properly.

Adapted from this answer:

const tmp = document.createElement('input');

$().method() fires the listeners associated with that method. If you need to call functions on dom elements, index the jQuery object.



Although why you wouldn’t just use document.focus is probably a question worth answering.

If the objective is to remove the focus on any form field element you can use this:


If you don’t have jQuery, you can use plain JavaScript:

let elem = document.querySelector(':focus');
if(elem ) {
  elem .blur();

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Force ReactJS to throw real errors when propTypes validation fails?

Similar Posts