Entrar Ainda não tem acesso?
4
respostas

Focus em campo a partir de um link, de uma página para outra

Referente ao curso jQuery: domine a biblioteca mais popular do mercado parte 1

por thiagoximenesfhrc
| 170.5k xp | 106 posts

Queria saber como fazer essa lógica.

Tipo eu tenho 3 links em uma página (index.html):

<a href="paginas/contato.html" id="link1"> Nome </a>
<a href="paginas/contato.html" id="link2"> Sobrenome </a>
<a href="paginas/contato.html" id="link3"> Email </a>

E tenho 3 inputs em outra página (contato.html):

<input type="text" id="nome">
<input type="text" id="sobrenome">
<input type="text" id="email">

A ideia é que quando clicado em um dos links, seja redirecionado para página com focus no input referente. Exemplo:

Clicou no 1 Link --> Joga na outra página com focus no campo Nome. Clicou no 3 Link --> Joga na outra página com focus no campo Email.

$(document).ready(function (){
    $('a#link1').click(function (){
        ....
    })
});

Alguém pode dar uma ideia?

4 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala thiago, tudo bom? Acredito que você pode fazer algum if baseado no document.referrer ele sempre tem o link da página anterior que você veio.

por Priscila Rodrigues dos Anjos - PAAS
| 215.7k xp | 52 posts

Thiago,

Pode ser:

$(document).ready(function() {

  $("#link1").click(function(){
      $("#nome").focus();
  });

  $("#link2").click(function(){
      $("#sobrenome").focus();
  });

  $("#link3").click(function(){
      $("#email").focus();
  });

});
por thiagoximenesfhrc
| 170.5k xp | 106 posts

Esse cógido funciona na mesma página. Porém eu quero que isso funcione ao ser redirecionado para outra página.

Os links em uma página e os inputs em outra página.

$(document).ready(function() {
    var referrer =  document.referrer;
    console.log(referrer);
});

Assim eu consigo pegar a página mas e agora?

por thiagoximenesfhrc
| 170.5k xp | 106 posts

Sem usar o jQuery eu consegui, é só colocar o id na frente do link.

<a href="paginas/contato.html#nome"> Nome </a>
<a href="paginas/contato.html#sobrenome"> Sobrenome </a>
<a href="paginas/contato.html#email"> Email </a>