CODEWITHSUNDEEP
javascriptfocus
Andres
Andres

Reputation: 5187

How do you clear the focus in javascript?

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?

Upvotes: 247

Views: 282864

Answers (9)

T.Woody
T.Woody

Reputation: 1228

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.

Upvotes: 6

m_j_alkarkhi
m_j_alkarkhi

Reputation: 367

For anyone using typescript, use

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

This makes sure the element is of type HTMLElement

Upvotes: 10

jps
jps

Reputation: 11605

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);

Upvotes: 271

Wilco
Wilco

Reputation: 849

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.

Upvotes: 74

bsbak
bsbak

Reputation: 773

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

Upvotes: -5

pwnzor1337
pwnzor1337

Reputation: 711

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();

Upvotes: 71

kennebec
kennebec

Reputation: 104840

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.

Upvotes: 1

plodder
plodder

Reputation: 2306

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

Upvotes: 2

Kevin Reid
Kevin Reid

Reputation: 43932

.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.

Upvotes: 99

Related Questions