Criar um botão de copiar texto em uma página web pode melhorar significativamente a experiência do usuário. Isso permite que os usuários copiem rapidamente um texto específico sem a necessidade de selecioná-lo manualmente e usar as teclas Ctrl+C. Neste tutorial, vamos aprender a criar um botão que copia um texto para a área de transferência com apenas um clique, utilizando HTML e JavaScript.
Passo a Passo
1. Estrutura HTML
Primeiro, definiremos a estrutura básica em HTML. Isso inclui um campo de texto (input) onde o texto a ser copiado será exibido e um botão que, quando clicado, acionará a função de copiar.
No campo value do input, você pode pré-definir um texto que será exibido inicialmente. Isso é útil se você quiser que os usuários copiem um texto específico por padrão.
2. Adicionando JavaScript
Agora, vamos adicionar o JavaScript necessário para fazer o botão funcionar. O script irá selecionar o texto no campo input e então copiá-lo para a área de transferência.
3. Explicação do Código
document.getElementById("botao"): Isso seleciona o botão no nosso HTML..addEventListener("click", function() {...}): Adiciona um ouvinte de evento que reage quando o botão é clicado.var texto = document.getElementById("texto"): Seleciona o campo de texto.texto.select(): Seleciona o texto dentro do campo de texto.document.execCommand('copy'): Executa o comando de copiar, copiando o texto selecionado para a área de transferência.alert("Texto Copiado: " + texto.value): Exibe um alerta indicando que o texto foi copiado (opcional).
Conclusão
Com estes passos simples, você criou um botão de copiar texto que facilita a interação dos usuários com sua página web. Essa funcionalidade é especialmente útil em websites onde os usuários precisam copiar códigos, citações ou qualquer outro tipo de texto frequentemente.