2 Códigos fáceis para botão copiar texto em Javascript

Wordpress
Publicado em: 15 de setembro de 2021 - Visto 134 vezes.
Langues / Languages:
  • Português
  • English
  • Français

  • 2 Códigos fáceis para botão copiar texto em Javascript

    Como colocar um botão para copiar texto para área de transferência em JavaScript: Algumas veze você pode ter precisado que um usuário tenha que copiar um texto, ou um código, e-mail, telefone, ou qualquer outra coisa no seu site, mas não queria que ele simplesmente selecionasse e desse “Ctrl+C“.

    Isso pode ter diversas aplicabilidades, pois eu mesmo já precisei implantar algo parecido após implementar a proteção contra cópia como explique no post: Como proteger o seu conteúdo contra cópia via css.

    Pensando nisso resolvi postar aqui para vocês um dos métodos que usei para solucionar esse problema:

    Esse método insere um input type text onde você pode deixar que o visitante escreva algo e depois clique no botão copiar. Veja o exemplo abaixo:

    Javascript botão copiar: Modelo 1:

    O modelo acima deixa que o visitante escreva seu próprio texto e depois clique em “COPIAR” e terá o texto digitado copiado para área de transferência.

    Para aplicar esse Modelo basta copiar o código abaixo e inserir no seu site:

    <script>
        function copiarTexto() {
            let textoCopiado = document.getElementById("texto");
            textoCopiado.select();
            textoCopiado.setSelectionRange(0, 99999)
            document.execCommand("copy");
            alert("O TEXTO COPIADO FOI: " + textoCopiado.value);
        }
    </script>
    <input type="text" name="texto" id="texto" placeholder="Digite alguma coisa" size="30">
        <button onclick="copiarTexto()">COPIAR TEXTO</button>

    Java script botão copiar: Modelo 2:

    Outra opção é você já definir o que será copiado sem que o usuário edite ou insira qualquer informação. Veja o exemplo abaixo:

    Para aplicar esse segundo modelo basta copiar o código abaixo e inserir no seu site:

    <script>
        function copiarTexto() {
            let textoCopiado = document.getElementById("texto");
            textoCopiado.select();
            textoCopiado.setSelectionRange(0, 99999)
            document.execCommand("copy");
            alert("O TEXTO COPIADO FOI: " + textoCopiado.value);
        }
    </script>
    <input type="text" name="texto" id="texto" placeholder="Digite alguma coisa" value="ESSE TEXTO SERÁ COPIADO"  size="30" readonly="">
        <button onclick="copiarTexto()">COPIAR TEXTO</button>

    Java script botão copiar: Personalização:

    Você também pode personalizar o texto do botão e a mensagem de alerta que é mostrada assim que o texto é copiado.

    Sending
    Nota de visitantes:
    5 (1 voto)
    Nota com comentários: 0 (0 votos)

    Sobre o autor:

    Esse post foi publicado em 15 de setembro de 2021 por Alexandre Santos.
    Blogueiro desde 2009 - Programador - Amante da tecnologia e internet.
    Tags: , ,
    #COMPARTILHE:
    .

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

    Sending