Como focar em uma div com JavaScript

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.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 15min

Conhecer formação

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!