2

Estou organizando um formulário de contato, dividido em várias partes.

Uma das coisas que preciso seria que quando o usuário clicasse em um h3 (mas pode ser também uma div, ancora ou button) um campo específico deste formulário ficasse focado.

Como eu conseguiria realizar isso?

2 Respostas 2

7

Para usares um h3 podes fazer uso de uma ancora associada ao ID do input.

Seria assim:

<h3><a href="#a">Clica-me para o input A</a></h3>
<h3><a href="#b">Clica-me para o input B</a></h3>

<input type="text" id="a">
<input type="text" id="b">

ou como o @ricardo também sugeriu usar o label assim:

<label for="a">
    <h3>Clica-me para o input A</h3>
</label>
<label for="b">
    <h3>Clica-me para o input B</h3>
</label>

<input type="text" id="a">
<input type="text" id="b">

E nestes casos não faz diferença onde na página os elementos estão desde que cada ID seja único (não repetido dentro da página).

2
  • Sergio o meu click não está a focar na tua primeira opção... Talvez seja aqui da snipped built-in do SO
    – Miguel
    Commented 5/08/2016 às 13:50
  • @Miguel é possivel, ele é meio bugado :) Podes testar aqui: jsfiddle.net/eon3x98u
    – Sergio
    Commented 5/08/2016 às 13:52
3

Existem algumas formas de você resolver seu problema.
A mais simples seria utilizando elementos HTML, assim:

<label for="minha_input"><h3>Input</h3></label>
<input type="text" id="minha_input">

Caso não queira, uma alternativa é fazer via Java Script, assim:

function myFocus() {
  document.getElementById('minha_input').focus();
}
 <h3 onclick="myFocus()">Input</h3>
<input type="text" id="minha_input">

Espero ter ajudado.

2
  • Dei +1 pela sugestão de label mas não vejo razão para usar JavaScript quando o HTML tem maneiras nativas para fazer isso.
    – Sergio
    Commented 5/08/2016 às 13:59
  • Concordo plenamente @Sergio. Dei +1 na sua resposta também, pois não tinha ciência de que o href usando # identificava o id da input. Commented 5/08/2016 às 15:41

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 .