Como definir o foco no campo de entrada usando JQuery

106

Dada a seguinte estrutura HTML:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

que será repetido várias vezes na página, como faço para definir o foco no campo de entrada no .bottomdiv quando um usuário clica no link no .topdiv?

No momento, estou fazendo com que o .bottomdiv apareça com sucesso no clique usando o código JQuery abaixo, mas não consigo descobrir como definir o foco no campo de entrada ao mesmo tempo.

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

Obrigado!

pedra rolando
fonte
Sua pergunta foi respondida, mas também: Presumo que você também esteja executando return false;no final do callback do evento? Ou function(e) { e.preventDefault(); ..... }? Caso contrário, seu navegador apenas navegará para essa página após executar o retorno de chamada.
simshaun
@simshaun navegar para qual página?
Rolling Stone
Bem, no seu exemplo, quando você clica nesse link, ele vai para example.com .
simshaun
oh, isso mesmo, obrigado pelo aviso!
Rolling Stone

Respostas:

135

Tente fazer isso para definir o foco para o primeiro campo de entrada:

$(this).parent().siblings('div.bottom').find("input.post").focus();
Justin Ethier
fonte
1
Espaço entre input& :first. O jQuery une isso automaticamente? Sempre achei que deveria ser input:first.
simshaun
Sim, você pode escrever de qualquer maneira. Suponho input:firstque seja a maneira mais formal de escrevê-lo, embora pareça mais fácil de ler de outra maneira. Mas talvez seja só eu :)
Justin Ethier
Eu acho que porque estou tão acostumada com isso, quando vejo o espaço, automaticamente penso em "elemento filho" e levo um segundo para me confundir. Mas hey, sou só eu. É legal que funcione de qualquer maneira.
simshaun
@justin, na verdade, tive que ajustá-lo um pouco para que funcionasse: $(this).parent().siblings('div.bottom').find("input.post").focus();mas .find()é o seletor que eu estava procurando. Curiosamente, input :firstnem input:firstfuncionou.
Rolling Stone
Interessante, provavelmente porque a entrada está dentro de uma formtag. De qualquer forma, fico feliz que você vá trabalhar!
Justin Ethier
7

A resposta de Justin não funcionou para mim (Chromium 18, Firefox 43.0.1). O jQuery .focus()cria um destaque visual, mas o cursor de texto não aparece no campo (jquery 3.1.0).

Inspirado por https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ , adicionei o atributo autofocus ao campo de entrada e voila!

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}
MKaama
fonte
1
Funcionou para mim. A versão mais simples é assim: $ ('. Class input'). Focus (); $ ('. class input'). prop ('autofocus');
raison