Cópia de JavaScript para a área de transferência

A funcionalidade “Copiar para a área de transferência” é algo que todos nós usamos dezenas de vezes diariamente, mas a API do lado do cliente em torno dela sempre foi deficiente; algumas APIs mais antigas e implementações de navegadores exigiam uma caixa de diálogo assustadora no estilo “o senhor tem certeza?” antes que o conteúdo fosse copiado para a área de transferência – o que não é bom para a usabilidade ou confiança. Há cerca de sete anos, o escrevi no blog sobre o ZeroClipboard, uma solução para copiar conteúdo para a área de transferência de uma forma mais inovadora…

…e, por novidade, quero dizer usar o Flash. Todos nós odiamos o Flash hoje em dia, mas a funcionalidade é sempre o objetivo principal e ele era bastante eficaz para esse propósito, portanto, temos que admitir que era uma solução decente. Anos depois, temos uma solução melhor e sem Flash: clipboard.js.

A API clipboard.js para copiar para a área de transferência é curta e simples. Aqui estão alguns usos:

Cópia e corte de valores de área de texto e entrada

/* Textarea - Cut
hello
Cut
*/
var clipboard = new Clipboard('.copy-button');

/* Input - Copy

Copy
*/
var clipboard = new Clipboard('.copy-button');

Cópia do innerHTML do elemento

/* HTMLElement - Copy
hello
Copy
*/
var clipboard = new Clipboard('.copy-button');

Target e Text Funções

// Contents of an element
var clipboard = new Clipboard('.copy-button', {
    target: function() {
        return document.querySelector('#copy-target');
    }
});

// A specific string
var clipboard = new Clipboard('.copy-button', {
    text: function() {
        return 'clipboard.js is awesome!';
    }
});

Eventos

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
    console.log(e);
});

clipboard.on('error', function(e) {
    console.log(e);
});

Sem Flash, com uma API simples e funcionando em todos os principais navegadores, o clipboard.js é uma grande vitória para a Web e seus usuários. Os dias da funcionalidade de shimming do Flash no lado do cliente acabaram – viva a tecnologia da Web!