236

I know this shouldn't be that hard, but I couldn't find the answer on Google.

I want to execute a piece of javascript that will clear the focus from whatever element it is on without knowing ahead of time which element the focus is on. It has to work on firefox 2 as well as more modern browsers.

Is there a good way to do this?

2
  • what does clear focus mean? - is it the same as blur?
    – plodder
    Mar 26, 2010 at 1:36
  • 6
    I want to make it so that no element in the browser has focus.
    – Andres
    Mar 26, 2010 at 1:42

9 Answers 9

257

Answer: document.activeElement

To do what you want, use document.activeElement.blur()

If you need to support Firefox 2, you can also use this:

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);
5
  • 8
    If Firefox 2, with 0.66% browser share, is a deal breaker ... I have a fix, which is in my edited answer.
    – jps
    Mar 26, 2010 at 2:06
  • 28
    In 2013, the browser share of Firefox 2 is substantially less than 0.66%, and the simple document.activeElement.blur() is the best way to achieve this effect.
    – chowey
    Nov 28, 2013 at 21:57
  • 4
    I get the following: Property 'blur' does not exist on type 'Element'.ts(2339)
    – YTG
    Feb 8, 2021 at 12:37
  • @YTG See the answer I posted to this question, which addresses this problem.
    – Wilco
    Apr 13, 2021 at 10:16
  • document.activeElement is a read-only property. You cannot assign to it anything Jun 28, 2021 at 14:39
96

.focus() and then .blur() something else arbitrary on your page. Since only one element can have the focus, it is transferred to that element and then removed.

6
  • Is there a way to make an invisible element that has focus?
    – Andres
    Mar 26, 2010 at 1:45
  • 1
    I'm not an expert on the best way to do that; but you could certainly position it off-screen or outside of the bounds of an overflow: clip styled element. But you could just use a field that already exists on the page. Or create one just for the purpose and remove it again.
    – Kevin Reid
    Mar 26, 2010 at 2:02
  • I think that setting the focus to an element off-screen will force a scroll to that element. However, you can create an invisible element for the purpose. That being said, some browsers may have a hard time to remove the caret. Just blur() would probably work better. You could still get keys with a keyup (keydown) event handler. Jun 4, 2015 at 23:54
  • 5
    This answer is out of date and doesn't apply in the year 2017. Use activeElement instead, as in stackoverflow.com/a/2520670/39808 Mar 17, 2017 at 18:30
  • It still works, just longer and moves the focus (which may interfere with TAB navigation) Also it's not immediately apparent what should "something else arbitrary" be.
    – user202729
    Aug 21, 2018 at 9:19
65
document.activeElement.blur();

Works wrong on IE9 - it blurs the whole browser window if active element is document body. Better to check for this case:

if (document.activeElement != document.body) document.activeElement.blur();
3
  • 4
    I get Property 'blur' does not exist on type 'Element'.ts(2339)
    – YTG
    Feb 8, 2021 at 12:38
  • 3
    you would need to cast as HTMLElement. Jun 21, 2021 at 3:26
  • Although IE9 has fallen by the wayside, what it was doing actually was somewhat sensible, and supporting this behavior seems like a good idea, should other browsers decide to implement this same behavior. Heck, chrome could implement a flag for this behavior tomorrow. Mar 27 at 12:29
63

None of the answers provided here are completely correct when using TypeScript, as you may not know the kind of element that is selected.

This would therefore be preferred:

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

I would furthermore discourage using the solution provided in the accepted answer, as the resulting blurring is not part of the official spec, and could break at any moment.

3
  • A similar solution with the newer as type cast: (document.activeElement as HTMLElement).blur().
    – Tim
    Dec 27, 2021 at 16:59
  • 1
    I prefer document.activeElement?.blur && document.activeElement.blur()
    – foobored
    May 18, 2022 at 10:09
  • 1
    as does not ensure that the element is an HTMLElement. It just satisfies the type checker. It will crash if blur is not defined. Dec 7, 2022 at 17:05
9

For anyone using typescript, use

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

This makes sure the element is of type HTMLElement

1
  • 2
    This does not ensure that the element is an HTMLElement. It just satisfies the type checker. Wrap it in if(document.activeElement instanceof HTMLElement) to avoid crashing on non-HTML DOM nodes. Dec 7, 2022 at 17:05
4

I prefer document.activeElement?.blur && document.activeElement.blur().

I am using vue & react: In my case, I can call this about anywhere between components, and it will remove the focus.

1
  • This one throws an error too. 'blur' does not exists on Element. So there is "non instanceof" version of the Element.blur typeguard. document.activeElement && "blur" in document.activeElement && document.activeElement.blur && typeof document.activeElement.blur === "function" && document.activeElement.blur();
    – SkillGG
    Sep 9 at 13:27
2

dummyElem.focus() where dummyElem is a hidden object (e.g. has negative zIndex)?

1

You can call window.focus();

but moving or losing the focus is bound to interfere with anyone using the tab key to get around the page.

you could listen for keycode 13, and forego the effect if the tab key is pressed.

0
-4

With jQuery its just: $(this).blur();

1
  • 4
    This is an old answer so you may know by now, but there are two reasons this answer does not apply. 1. It assumes the OP was using jquery, 2. this needs to be the focused element, while the question explicitly states the OP does not know the focused element ahead of time.
    – Brandon
    Sep 27, 2019 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.