Como criar um botão de Copiar (CTRL + C) com JavaScript

Como criar um botão de Copiar (CTRL + C) com JavaScript

Neste artigo vamos criar um botão de copiar, com o mesmo efeito de (CTRL + C) com JavaScript.

Podemos fazer isso com o comando document.execCommand('copy'); , deixando a sua interface mais dinâmica e interativa. Lembrando que podemos usar (o cut e o paste).

Nesta seção, projetaremos uma estrutura simples na tag <div> e a <button> para inserirmos o botão em si. 

Essas são as tags que usaremos para criar o nosso Botão de copiar texto com JavaScript.

OBS: reparem que o id tem que ser diferente. este é um exemplo básico para copiar texto e frases.

Veja exemplo abaixo eu adicionei o (id=”1″) e (id=”2″), se quiser inserir mais frases insira o (id=”3″) e assim por diante.

Vamos Adicionar o HTML

    <div class="box-frases">

        <div class="texto" id="1">"A imaginação é mais importante que o conhecimento."</div> 
        <button class="btnCopi" type="button" onclick="CopyTexto('1')">Copiar</button>
    
    </div>  

    <div class="box-frases">

        <div class="texto" id="2">"A persistência é o caminho do êxito."</div> 
        <button class="btnCopi" type="button" onclick="CopyTexto('2')">Copiar</button>
    
    </div> 

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Botão de copiar texto.

.box-frases { 

    max-width:700px; 
    overflow:auto; 
    margin:auto; 
    margin-bottom:20px; 
    float:none; 
    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
    border-radius:3px; 
    padding:10px; 

}

.box-frases .texto   { 

    float: left; 
    width: 92%; 
    padding: 3px 0px; 
    font-style:italic; 

}

.box-frases .btnCopi { 

    background:#e3e3e3; 
    color:#202020; 
    float:right; 
    border:none; 
    padding:5px; 
    border-radius:3px; 
    cursor: pointer;
}

.box-frases .btnCopi:active { 

    background: #98e39d; 
    color: #fff; 

}

Vamos Adicionar o JavaScript

<script type="text/javascript">

    function CopyTexto(id){
        var r = document.createRange();
        r.selectNode(document.getElementById(id));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(r);
        try {
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            console.log('Texto copiado com sucesso. ' + r);
        } catch (err) {
            console.log('Não foi possível copiar!');
        }
    }

</script>

Combinando as Três seções acima com Html,  Css e JavaScript  temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando