Uma funcionalidade interessante em certos aplicativos é permitir a fácil cópia de um texto presente na página, é claro que um texto pode ser facilmente copiado com um control+c => control+v , mas isso envolve selecionar o texto, e etc., se podemos reduzir um passo que seja, já estamos melhorando um pouco a experiência do usuário.

Para facilitar a implementação deste recurso podemos utilizar uma pequena biblioteca chamada clipboard.js.

Inicialização do clipboard.js

Para utilizá-la primeiro podemos realizar o download e adicionar a o arquivo clipboard.min.js dentro da nossa página.

<script src="clipboard.min.js"></script>

Uma vez adicionada a biblioteca devemos instanciar um objeto ClipboardJS com um seletor DOM, elemento HTML, ou lista de elementos HTML.

// seletor DOM
var clipboard = new ClipboardJS('.btn');

// lista elementos HTML
var btns = document.querySelectorAll('.btn');
var clipboard = new ClipboardJS(btns);

O que esta inicialização realiza é adicionar um event listener para os elementos selecionados que irá dispara o copiar quando clicado.

Copiando

Para especificarmos o que será copiado adicionamos o atributo HTML data-clipboard-target no elemento passado para o ClipboardJS. O valor deste atributo será o seletor do elemento que contém o valor a ser copiado.

// conteúdo do input
<input type="text" id="field1">
<button class="btn" data-clipboard-target="#field1">Copiar Input</button>

// conteúdo de elemento
<span class="texto">Um texto qualquer</span>
<button class="btn" data-clipboard-target=".texto">Copiar Texto</button>

Caso o conteúdo que queremos copiar para o clipboard não seja o conteúdo de algum elemento podemos utilizar ao invés do atributo data-clipboard-target o atributo data-clipboard-text.

<button class="btn" data-clipboard-text="um texto plano para copiar :)">Copiar Texto</button>

Recortando conteúdo

A ação padrão do evento disparado é a copy, que somente copia o conteúdo para o clipboard, mas podemos facilmente realizar a ação de recortar, bastando para isso adicionar o atributo data-clipboard-action com o valor cut ao elemento de ação.

<textarea id="texto-long">Texto para recortar.</textarea>
            
<button class="btn" data-clipboard-target="#texto-long" data-clipboard-action="cut">Recortar</button>

Eventos

Até agora só vimos como copiar um texto, mas ainda não estamos dando um feedback(retorno) para o usuário, dando a impressão que nada aconteceu. E isso não é bom!

Para dar um retorno para o usuário temos dois eventos o success e error que devem ser adicionado no objeto ClipboardJS.

var clipboard_retorno = new ClipboardJS('#btn_retorno');
clipboard_retorno.on('success', function (e) {
    console.info('Ação:', e.action);
    console.info('Texto:', e.text);
    console.info('Elemento:', e.trigger);

    document.querySelector('#btn_retorno').innerHTML = 'Copiado!';
    e.clearSelection();
});

O objeto de evento passado para a função nos fornece algumas informações como: a ação que foi executada(e.action), o texto que foi copiado(e.text), e o elemento que disparou o evento(e.trigger). O objeto também fornece um método para limpar a seleção feita para realizar a cópia(e.clearSelection()).

Ver os exemplos

Bom era isso, espero que ajude. T++.