Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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?

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);
                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
                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
                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.
– Alexis Wilke
                Jun 4, 2015 at 23:54
                This answer is out of date and doesn't apply in the year 2017. Use activeElement instead, as in stackoverflow.com/a/2520670/39808
– Paul Fisher
                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
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();
                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.
– Devin Rhode
                Mar 27 at 12:29
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.
                A similar solution with the newer as type cast: (document.activeElement as HTMLElement).blur().
– Tim
                Dec 27, 2021 at 16:59
                as does not ensure that the element is an HTMLElement. It just satisfies the type checker. It will crash if blur is not defined.
– Raine Revere
                Dec 7, 2022 at 17:05
                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.
– Raine Revere
                Dec 7, 2022 at 17:05
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.
                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
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.