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 .bottom
div quando um usuário clica no link no .top
div?
No momento, estou fazendo com que o .bottom
div 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!
return false;
no final do callback do evento? Oufunction(e) { e.preventDefault(); ..... }
? Caso contrário, seu navegador apenas navegará para essa página após executar o retorno de chamada.Respostas:
Tente fazer isso para definir o foco para o primeiro campo de entrada:
fonte
input
&:first
. O jQuery une isso automaticamente? Sempre achei que deveria serinput:first
.input:first
que seja a maneira mais formal de escrevê-lo, embora pareça mais fácil de ler de outra maneira. Mas talvez seja só eu :)$(this).parent().siblings('div.bottom').find("input.post").focus();
mas.find()
é o seletor que eu estava procurando. Curiosamente,input :first
neminput:first
funcionou.form
tag. De qualquer forma, fico feliz que você vá trabalhar!Se a entrada estiver em uma caixa de diálogo modal de bootstrap, a resposta será diferente. Copiar de Como definir o foco para a primeira entrada de texto em um modal de bootstrap depois de mostrado isso é o que é necessário:
fonte
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!
fonte