$ .focus () não está funcionando

O último exemplo da focus()documentação do jQuery indica

$('#id').focus()

deve tornar a entrada focada (ativa). Parece que não consigo fazer isso funcionar.

Mesmo no console deste site, estou tentando pela caixa de pesquisa

$('input[name="q"]').focus()

e eu não estou conseguindo nada. Alguma ideia?

Na verdade, o exemplo que você deu para se concentrar neste site funciona muito bem, desde que você não esteja focado no console. O motivo pelo qual não está funcionando é simplesmente porque não está roubando o foco do console de desenvolvimento. Se você executar o seguinte código no console e clicar rapidamente na janela do navegador, verá o foco na caixa de pesquisa:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

Quanto ao seu outro, a única coisa que me deu problemas no passado é a ordem dos eventos. Você não pode chamar focus () em um elemento que não foi anexado ao DOM. O elemento que você está tentando focar já foi anexado ao DOM?

Encontrou uma solução em outro lugar na rede ...

$('#id').focus();

não funcionou.

$('#id').get(0).focus();

funcionou.

Algumas das respostas aqui sugerem o uso setTimeoutpara atrasar o processo de foco no elemento de destino. Um deles menciona que o alvo está dentro de um diálogo modal. Não posso comentar mais sobre a correção da setTimeoutsolução sem conhecer os detalhes específicos de onde ela foi usada. No entanto, pensei em fornecer uma resposta aqui para ajudar as pessoas que se deparam com esse segmento, assim como eu fiz

O simples fato da questão é que você não pode se concentrar em um elemento que ainda não é visível . Se você enfrentar esse problema, verifique se o alvo está realmente visível quando é feita a tentativa de focalizá-lo. No meu próprio caso, eu estava fazendo algo nesse sentido

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

Isso não funcionou. Eu só percebi o que estava acontecendo quando eu executado $ ( '# elementID'). Focus () `a partir do console, que fez o trabalho. A diferença - no meu código acima do destino, não há certeza de que o destino será visível, pois a animação pode não estar completa . E aí está a pista

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

funciona exatamente como esperado. Eu também tinha inicialmente colocado uma setTimeoutsolução e funcionou também. No entanto, um tempo limite escolhido arbitrariamente é obrigado a interromper a solução mais cedo ou mais tarde, dependendo da velocidade com que o dispositivo host realiza o processo de garantir que o elemento de destino esteja visível.

se você usa o bootstrap + modal, isso funcionou para mim:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

Apenas no caso de alguém mais se deparar com essa pergunta e ter a mesma situação que eu - eu estava tentando definir o foco depois de clicar em outro elemento, mas o foco não parecia funcionar. Acontece que eu só precisava de um e.preventDefault();- aqui está um exemplo:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

Isso ajudou:

Se você chamar HTMLElement.focus () de um manipulador de eventos com o mouse, você deve chamar event.preventDefault () para impedir que o foco saia do HTMLElement. Fonte: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Sei que isso é antigo, mas me deparei hoje. Nenhuma das respostas funcionou para mim, o que eu achei que funcionou foi setTimeout. Eu queria que meu foco fosse colocado na entrada arquivada de um modal, usando o setTimeout trabalhado. Espero que isto ajude!

Eu também tive esse problema. A solução que funcionou no meu caso foi usar a propriedade tabindex no elemento HTML.

Eu estava usando ng-repeatalguns elementos li dentro de uma lista e não consegui focar na primeira li usando .focus (), então simplesmente adicionei o atributo tabindex a cada li durante o loop.

então agora <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

O índice +1 foi iniciado a partir de 0. Verifique também se o elemento está presente no DOM antes de chamar a função .focus ()

Eu espero que isso ajude.

Para aqueles com o problema de não funcionar porque você usou "$ (elemento) .show ()". Eu resolvi da seguinte maneira:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

Portanto, você não precisa de um timer, ele será executado depois que o método show for concluído.

Adicione um atraso antes do foco (). 200 ms é suficiente

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Teve esse problema novamente agora, e, acredite ou não, tudo que eu precisava fazer era fechar as ferramentas do desenvolvedor. Aparentemente, a guia Console tem a prioridade do foco sobre o conteúdo da página.

Verifique se o elemento e seus pais estão visíveis. Você não pode usar o foco em elementos ocultos

SOLUÇÃO ADICIONAL Teve o mesmo problema em que o focus () parecia não funcionar, mas acabou por acontecer que o necessário era rolar para a posição correta:

• https://stackoverflow.com/a/43342974/1335717

Para o meu caso, eu tive que especificar um índice de tabulação ( -1se possível apenas por script)

<div tabindex='-1'>
<!-- ... -->
</div>