copiar texto

Como fazer copiar texto para área de transferência com Javascript

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:

copiar texto 1

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:

copiar texto 2

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.

Referências

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

Este conteúdo te ajudou de alguma forma?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok
Privacy Policy