Focus em um campo a partir de um link

Front-end JavaScript
, ,
#1

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?

#2

Você vai fazer isso apenas com jQuery?
Se sim, vai precisar de 2 coisas:
Na tela em que o link é clicado, você precisa fazer o redirecionamento, incluindo na URL um parâmetro que vá informar qual link foi selecionado.
Na tela que é chamada, precisa capturar os parâmetros da requisição (GET, que estarão na URL, mais ou menos assim http://localhost:8080/aplicacao?opc=link1) e, com base nisso, invocar a função focus() do elemento respectivo ao link selecionado.

#3

E eu não faço ideia como fazer isso usando apenas o jquery… não tenho nem noção de como começar …

#4

A função de um desenvolvedor/programador é, antes de mais nada, a de pesquisar.
É lógico que, com o tempo e a experiência adquirida, esse processo se torna mais natural e menos trabalhoso. Só que não.

Como eu faria para resolver esse problema.
Considerando a resposta anterior (que eu ignorarei que fui eu mesmo que respondi), eu focaria nos dois pontos levantados:

  • Redirecionar passando parâmetros
  • Ler parâmetros recebidos
    A partir disso, começaria uma busca para descobrir e entender como cada ação pode ser feita.
    Para isso, nada melhor que o google (nem sempre temos livros à disposição).
    Por exemplo, eu posso pesquisar por algo como “jquery redirecionar com parâmetros”.
    Fazendo isso, terei vários resultados. Como eu gosto das coisas do stackoverflow, é o meu ponto de partida. Se ali não encontrar respostas, reconsiderarei o que estou fazendo, afinal, talvez não tenha como fazer.
    Porém, neste caso, eu encontrei respostas e selecionei a primeira.

Consegue fazer a outra parte?

#5

Olá amigo, tenho está solução com JavaScript, veja se te ajuda.

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>

<body>
    <a href="paginas/contato.html#nome" id="link1"> Nome </a>
    <br />
    <a href="paginas/contato.html#sobrenome" id="link2"> Sobrenome </a>
    <br />
    <a href="paginas/contato.html#email" id="link3"> Email </a>
</body>

</html>

contato.hmtl

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Contato</title>
    <script type="text/javascript">
        window.onload = function () {

            var firstName = document.getElementById("nome");
            var lastName = document.getElementById("sobrenome");
            var email = document.getElementById("email");

            
            var url = window.location;
           
            url = url.toString()

            var valor = url.split("#")[1];

            console.log(valor);

            switch (valor) {
                case 'nome':
                    firstName.focus();
                    break;
                case 'sobrenome':
                    lastName.focus();
                    break;
                case 'email':
                    email.focus();
                    break;
                default:
                    break;
            }
        }
    </script>
</head>

<body>
    <input type="text" id="nome">
    <br />
    <input type="text" id="sobrenome">
    <br />
    <input type="text" id="email">
</body>

</html>

Fonte:

1 curtida
#6

Francisco, deu certo sim. Porém se o script for removido tudo continua funcionando. Ou seja, basta colocar o id na frente do link que já redireciona. A ideia era realizar utilizando js.

…

#7

O script foi adicionado para algumas versões de navegadores que não funciona com somente o id na url, no chrome funcionou, mas no firefox foi necessário o script para o campo recebe o foco.