Selecionar texto do input quando clicar com JavaSript

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

Formação Recomendada

Formação Claude Code

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

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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!