Neste artigo você vai aprender a como selecionar texto do input quando clicar com JavaScript, de uma maneira simples e descomplicada
Fala programador(a), beleza? Bora aprender mais sobre JavaScript e DOM!
Para resolver este problema de selecionar texto, podemos criar um código totalmente inline
Facilitando a nossa vida um pouco, deixando tudo no HTML
Veja como é possível:
<input onClick="this.select();" value="Algum texto..." />
Isso faz com que ao usuário clicar no input o texto seja selecionado!
Há alguns relatos que não funciona no Mac, então use este snippet:
<input onClick="this.setSelectionRange(0, this.value.length)" value="Algum texto..." />
Se você quiser transferir tudo para o JS, pode fazer assim:
const input = document.querySelector("input");
input.addEventListener("click", function() {
this.select();
})
Assim separamos as responsabilidades, e acredito que seja a maneira mais indicada para projetos profissionais
Basta você alterar o seletor para o id ou class do seu input, aqui eu selecionei pela tag
Conclusão
Neste artigo você aprendeu a como selecionar texto do input quando clicar com JavaScript
Utilizamos duas estratégias:
- Diretamente no elemento do HTML, que é menos indicado;
- E também criando um evento no evento de click, para selecionar o texto com código em um arquivo de JS;
Escolha que achar melhor e aplique no seu código! 🙂
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!