6

Sempre que desejo testar algo pela web eu acabo utilizando o console do browser (F12 > Console) para verificar algum comportando, especialmente se tratando de . Porém, notei recentemente que o evento .focus() não funciona conforme o esperado.

Vejam o exemplo abaixo:

<input id="teste" type="text" id="teste" />

<br/><br/><br/>

<button onclick="document.getElementById('teste').focus()">teste</button>

Se eu clicar no botão "teste", o input terá foco, mas se eu digitar o mesmo comando que está no onclick() no console, nada acontece.

Diante disso, como fazer o .focus() funcionar e qual o motivo de isso ocorrer?

Nota: Isso não occorre só por causa do snippet. Se eu tentar fazer o mesmo com o input de pesquisa do SOpt, nada ocorre:

document.querySelector('.top-bar .searchbar input[type="text"].f-input').focus();

2 Respostas 2

5

Acredito que seja algo relacionado as "politicas de comportamentos", o mesmo ocorre no Firefox, assim como no Chrome.

Quando você esta no DevTools (console do Chrome ou Firefox) a aba ou janela do navegador não esta em foco e então qualquer <input> ou <textarea> não irão receber foco, um teste simples é adicionar um timeout no Console, dentro do próprio site do SOpt abra o console do seu navegador e digite isto:

setTimeout(function () {
    document.querySelector('.top-bar .searchbar input[type="text"].f-input').focus();
}, 5000);

Você terá 5 segundos para voltar para a aba, então clique em qualquer lugar do site que não seja link, input ou textarea e assim que os 5 segundos passarem o input receberá o foco.

Agora faça outro teste igual, mas ao invés de deixar a aba em foco e digite com setTimeout com 5 segundos novamente, aguarde 6 segundos deixe a aba em foco, clique na aba e não na página, notará que ele receberá o foco também, ou seja elementos "inputables" só recebem o foco quando a aba ou página esta em foco.

Veja um exemplo sem timeout, se eu clicar na aba pra deixa-la em foco, mas não no "body" da página, o input já estará "marcado/sinalizado" para receber o foco quando a aba também estiver em foco:

foco na aba

2
  • Sei que não está na pergunta, mas existe algum motivo específico para o .click() funcionar e o .focus() não? Por exemplo, no site do SOpt podemos utiizar isso para ir ao perfil: document.querySelector('.top-bar .my-profile').click();
    – Randrade
    Commented 18/10/2017 às 2:01
  • 2
    @Randrade acho totalmente valido pro assunto, já que se refere as politicas de comportamento, note que .click funciona na maioria dos casos, outros não irão (tipo abrir certos tipos de janelas), para outras tarefas comum o click é algo que pode ser programável porque a politica de funcionamento provavelmente entende que aquilo não vai afetar o usuário diretamente, ou seja será uma ação dentro da página e não irá controlar o "mouse/rato", já o focus iria provavelmente controlar o ponteiro, e o que fosse digitado entraria no campo. Não posso afirmar com precisão, mas prometo trazer fontes ;)
    – Syzoth
    Commented 18/10/2017 às 2:05
4

Porque esta é a forma que o navegador trabalha no console (tanto que ele ignora e retorna undefined®).

inserir a descrição da imagem aqui

Sempre que você executa um comando no console, o focus estará sempre na linha de comando, esperando o próximo comando, ignorando qualquer apontamento de foco para algum elemento na página.

Porém, se você executar o comando abaixo e clicar imediatamente em qualquer parte da página, o foco irá funcionar:

setTimeout(function(){document.getElementById('teste').focus()},5000);

Por que?

Porque você tirou o foco do console e o comando será executado normalmente após 5 segundos.


Teste aqui no SOpt:

Execute o comando abaixo no console (F12) e clique imediatamente numa área qualquer da página (área em branco, vazia) ou feche o console:

setTimeout(function(){document.querySelector('#search > input').focus();}, 5000);
4
  • Sei que não está na pergunta, mas existe algum motivo específico para o .click() funcionar e o .focus() não? Por exemplo, no site do SOpt podemos utiizar isso para ir ao perfil: document.querySelector('.top-bar .my-profile').click();
    – Randrade
    Commented 18/10/2017 às 2:01
  • @Randrade O motivo está na resposta. O console não libera o foco a nada, a não ser que vc clique fora dele. Já o click não depende de foco, é um gatilho que o navegador executa normalmente.
    – Sam
    Commented 18/10/2017 às 2:03
  • Não ignora e o undefined não tem nada haver com isto, ele retorna undefined porque a função .focus() não retorna nada mesmo, se ela fosse "booleana" provavelmente retornaria algo, mas não é. Outra, não é ignorado, o elemento está sinalizado com foco, tanto que se você clicar na aba depois de executar o comando no console vai notar que o foco ocorre no input no momento que a aba recebeu o foco também, mesmo que muito tempo depois, ele só vai perder o foco se você clicar dentro da aba, ou seja em qualquer lugar da página, veja o GIF que postei de teste (cc @Randrade)
    – Syzoth
    Commented 18/10/2017 às 2:23
  • 2
    @GuilhermeNascimento Blz. Eu caricaturei o lance do undefined. Sua resposta está excelente, tanto que eu até dei +1 nela. Boa sorte!
    – Sam
    Commented 18/10/2017 às 2:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .