Neste artigo você vai aprender a como focar em uma div com JavaScript, vamos utilizar uma estratégia muito simples e eficaz
Fala programador(a), beleza? Bora aprender a utilizar a função de foco em JS!
Muitas vezes precisamos fazer com que um determinado elemento da página tenha o foco quando clicamos em um botão ou link.
Isso é bem simples de ser feito com JavaScript.
Para focar em uma div, basta pegar a referência da div e chamar o método focus da seguinte forma:
const minhaDiv = document.getElementById("minha-div");
function focarDiv() {
minhaDiv.focus();
}
document.getElementById("meu-botao").addEventListener("click", focarDiv);
Aqui, criamos uma função chamada focarDiv que foca na div cujo o id é “minha-div”. Em seguida, adicionamos um evento de clique ao elemento cujo o id é “meu-botao”. Quando o usuário clicar no botão, a função será chamada e a div terá o foco.
Mas e se quisermos fazer isso através de um link? Basta utilizar o atributo href da seguinte forma:
<a href="#" onclick="minhaDiv.focus()">Focar na div</a>
Aqui, criamos um link cujo o atributo href é “#” (o que evita que o usuário seja redirecionado para outra página quando clicar no link).
Em seguida, adicionamos o evento de clique utilizando o atributo onclick e chamamos o método focus da div quando o usuário clicar no link.
Curiosidade sobre JavaScript
Uma curiosidade sobre JavaScript é que ele foi criado em apenas 10 dias por uma única pessoa: Brendan Eich, que trabalhava na Netscape na época.
O objetivo era criar uma linguagem de script leve e fácil de usar para adicionar interatividade às páginas da web.
O JavaScript foi lançado pela primeira vez em 1995 e, desde então, se tornou uma das linguagens de programação mais populares e utilizadas em todo o mundo.
Hoje em dia, ele é utilizado em aplicações web, mobile, desktop e até mesmo em Internet das Coisas (IoT).
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Neste artigo você viu como focar em uma div com JavaScript
Utilizamos a função focus no elemento selecionado, que não necessariamente precisa ser uma div
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!