Como selecionar o texto da textarea ao clicar no input

Neste artigo você vai aprender a como selecionar o texto da textarea ao clicar no input, ou seja, quando disparar o evento de focus

Fala programador(a), beleza? Bora aprender a trabalhar com os inputs utilizando JavaScript!

Primeiramente vamos precisar selecionar o nosso elemento alvo, ele pode ser uma textarea ou input, vai funcionar da mesma maneira

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Depois vamos criar um evento para o evento focus, que é justamente quando o input recebe um click ou é selecionado de alguma forma

E então vamos utilizar o método select nele, que vai realizar a seleção do texto do input

Veja um exemplo prático:

const myTextArea = document.querySelector("#my-textarea")

myTextArea.addEventListener("focus", (e) => {
	e.target.select();
})

Na primeira linha há a criação da variável que contém a seleção da textarea

Depois temos o evento, este ativa o método select

Então agora basta clicar no input e verificar que o texto é selecionado

Lembrando que você deve modificar o código para atender as necessidades do seu projeto

O seletor provavelmente será alterado, pois o seu elemento deve ter um outro id ou classe

Com estes ajustes, o código já deve estar adaptado ao seu projeto

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você aprendeu a como selecionar o texto da textarea ao clicar no input

Utilizamos o método select, que faz justamente o que precisamos

Antes foi necessário selecionar o elemento alvo, que é a textarea, e também criar o evento de focus

O evento de focus dispara quando o elemento é selecionado de alguma forma

Por exemplo: por um clique do usuário ou por mudança de elementos via tecla tab

Deseja programar de forma profissional? 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!