Introdução
A função de copiar texto para a área de transferência ou copy to clipboard, é o atalho CTRL + C do teclado.
Implementar essa funcionalidade pode ajudar os usuários do seu sistema ou site.
Imagine que em algo que esteja desenvolvendo, o usuário precise copiar algum valor, como um texto, um link, uma senha ou qualquer outra coisa que precise copiar.
Muitos usuários não sabem que o CTRL + C é o atalho do teclado de copiar.
Dependendo da situação, como em um link, o usuário precisaria selecionar o link completo para copiar, pode ser que ele clique no link em vez de copiar o texto, isso pode piorar a experiência do usuário no uso da ferramenta.
Com isso, é uma boa implementar essa funcionalidade.
Campo para copiar texto
Para fazer essa função, é necessário ter o campo para que tenha o texto a ser copiado.
Para isso, criei um arquivo index.html, com os elementos e uma estilização, para ficar mais apresentável:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript - Copy to Clipboard</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgb(34,152,241);
background: linear-gradient(90deg, rgba(34,152,241,1) 0%, rgba(34,175,241,1) 100%);
}
input, button {
font-size: 25px;
border-radius: 10px;
border: none;
padding: 20px;
}
input {
background-color: #d4e8ff;
color: #06224a;
width: 500px;
}
input:focus {
outline: none;
}
button {
margin-left: 10px;
background-color: #06224a;
color: white;
text-transform: uppercase;
transition: 0.3s;
}
button:hover {
background-color: #010d1f;
transition: 0.3s;
}
</style>
</head>
<body>
<input type="text" name="texto" id="texto" placeholder="Digite alguma coisa" />
<button onclick="copiarTexto()">Copiar</button>
</body>
</html>
Para o estilo, centralizei os elementos ao centro utilizando flexbox.
Coloquei uma cor de fundo gradiente para a tela toda.
Para definir as cores para esse projeto, utilizei o site https://flatuicolors.com/ para gerar a paleta de cores.
E o fundo gradiente, depois de definir a cor que queria, utilizei o site https://cssgradient.io/ para gerar a cor do background.
Nos elementos que serão utilizados para o funcionamento, o primeiro é um input, que conterá o valor, nesse caso, o usuário pode digitar qualquer valor para copiar.
Mais para frente nesse tutorial, mostrarei com um valor fixo.
É importante o input ter um id para o Javascript conseguir obter esse elemento para fazer o funcionamento posteriormente.
E tem também um botão que irá chamar a função copiar texto.
O resultado do HTML + CSS é esse:
Função para copiar texto
A função em si não é tão complexa, o código é pequeno e simples de implementar.
Abaixo dos elementos, ficará o script para copiar texto:
<script>
function copiarTexto() {
let textoCopiado = document.getElementById("texto");
textoCopiado.select();
textoCopiado.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("O texto é: " + textoCopiado.value);
}
</script>
Primeiramente o elemento é selecionado pelo Id.
Depois o texto é selecionado.
O setSelectionRange é utilizado para copiar texto em dispositivos móveis, utilizar ele depois do select não traz nenhum problema de funcionamento nos navegadores, é indicado dessa forma para garantir compatibilidade.
Depois é executado o comando copy, para copiar texto.
E por fim o texto copiado é exibido em um alerta.
Caso você vá para outra área e use o atalho CRTL + V, verá que o texto foi copiado corretamente.
O resultado é esse:
Texto predefinido
Normalmente, o texto a ser copiado pelo usuário do sistema, é um texto que já foi definido para ele somente selecionar.
Para implementar isso, é preciso colocar no input, o atributo value, com o valor determinado, dessa forma:
<input type="text" name="texto" id="texto" placeholder="Digite alguma coisa" value="https://programandosolucoes.dev.br/"/>
Agora o texto já vai ficar diretamente no input:
Você pode atribuir esse valor dinamicamente de acordo com a lógica do seu sistema.
Bloquear alteração do valor do campo
Este campo já está muito bom, porém, mais uma coisa que acho importante fazer é bloquear a alteração do campo.
Se este valor é predefinido pelo sistema, na teoria o usuário não precisará mexer nele, somente copiar.
Para fazer isso, no input, coloque o atributo readonly, que dessa forma ele só conseguirá copiar o texto.
<input type="text" name="texto" id="texto" placeholder="Digite alguma coisa" value="https://programandosolucoes.dev.br/" readonly/>
Dessa forma o texto ficará fixo e a única opção do usuário é copiar o conteúdo.
Vídeo
Código fonte
O código fonte está no meu CodeSandbox, neste link.
Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.
Aprenda a testar Aplicações Javascript
Referências
https://www.w3schools.com/howto/howto_js_copy_clipboard.asp