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
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!