Como você limpa o foco em javascript?

159

Eu sei que isso não deve ser tão difícil, mas não consegui encontrar a resposta no Google.

Eu quero executar um pedaço de javascript que limpará o foco de qualquer elemento em que estiver, sem saber antecipadamente em qual elemento o foco está. Ele tem que funcionar no firefox 2, bem como em navegadores mais modernos.

Existe uma boa maneira de fazer isso?

Andres
fonte
o que significa foco claro? - é o mesmo que borrão?
plodder
3
Quero fazê-lo para que nenhum elemento do navegador tenha foco.
Andres

Respostas:

170

Responda: document.activeElement

Para fazer o que você quiser, use document.activeElement.blur()

Se você precisa dar suporte ao Firefox 2, também pode usar o seguinte:

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

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);
jps
fonte
8
Se o Firefox 2, com 0,66% de compartilhamento do navegador, for um rompimento de um contrato ... Eu tenho uma correção, que está na minha resposta editada.
JPS
21
Em 2013, o compartilhamento do navegador Firefox 2 é substancialmente menor que 0,66%, e a simples document.activeElement.blur()é a melhor maneira de obter esse efeito.
chowey
88

.focus()e .blur()outra coisa arbitrária na sua página. Como apenas um elemento pode ter o foco, ele é transferido para esse elemento e depois removido.

Kevin Reid
fonte
Existe uma maneira de criar um elemento invisível que tenha foco?
Andres
1
Não sou especialista na melhor maneira de fazer isso; mas você certamente pode posicioná-lo fora da tela ou fora dos limites de um overflow: clipelemento estilizado. Mas você pode simplesmente usar um campo que já existe na página. Ou crie um apenas para esse fim e remova-o novamente.
Kevin Reid
Eu acho que definir o foco para um elemento fora da tela forçará uma rolagem para esse elemento. No entanto, você pode criar um elemento invisível para essa finalidade. Dito isto, alguns navegadores podem ter dificuldade em remover o cursor. Apenas blur () provavelmente funcionaria melhor. Você ainda pode obter chaves com um manipulador de eventos keyup (keydown).
Alexis Wilke
5
Esta resposta está desatualizada e não se aplica no ano de 2017. Em vez disso, use activeElement, como em stackoverflow.com/a/2520670/39808
Paul Fisher
Ele ainda funciona, apenas por mais tempo e move o foco (o que pode interferir na navegação por TAB). Também não é imediatamente aparente o que deveria ser "algo mais arbitrário".
user202729
50
document.activeElement.blur();

Funciona errado no IE9 - desfoca a janela inteira do navegador se o elemento ativo for o corpo do documento. Melhor verificar esse caso:

if (document.activeElement != document.body) document.activeElement.blur();
pwnzor1337
fonte
Isso é verdade, mas hoje quase ninguém usa mais o IE9.
Donald Duck
18

Nenhuma das respostas fornecidas aqui está completamente correta ao usar o TypeScript, pois você pode não saber o tipo de elemento selecionado.

Portanto, isso seria preferido:

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

Além disso, eu desencorajaria o uso da solução fornecida na resposta aceita, pois o desfoque resultante não faz parte das especificações oficiais e poderia quebrar a qualquer momento.

wilcobrouwer
fonte
6
É divertido ver como uma pergunta que fiz em 2010 continua tendo uma resposta em evolução.
Andres
2

dummyElem.focus () onde dummyElem é um objeto oculto (por exemplo, tem zIndex negativo)?

plodder
fonte
0

Você pode chamar window.focus ();

mas mover ou perder o foco provavelmente interferirá em qualquer pessoa que use a tecla tab para se deslocar na página.

você pode ouvir o código da tecla 13 e renunciar ao efeito se a tecla Tab for pressionada.

Kennebec
fonte
-3

Com o jQuery, é apenas: $(this).blur();

bsbak
fonte
2
Esta é uma resposta antiga, então você já deve saber, mas há dois motivos pelos quais essa resposta não se aplica. 1. Supõe que o OP estava usando jquery, 2. thisprecisa ser o elemento focado, enquanto a pergunta afirma explicitamente que o OP não conhece o elemento focado antes do tempo.
Brandon