JavaScript Kopírovat do schránky

Funkce „Kopírovat do schránky“ je něco, co všichni používáme desítkykrát denně, ale rozhraní API na straně klienta vždy chybělo. některá starší rozhraní API a implementace prohlížečů vyžadovaly před zkopírováním obsahu do schránky děsivý dialog ve stylu „jste si jistý?“ – což není skvělé pro použitelnost nebo důvěryhodnost. Asi před sedmi lety jsem blogoval o ZeroClipboard, řešení pro kopírování obsahu do schránky novým způsobem...

...a novým způsobem mám na mysli použití Flash. Ahoj – všichni dnes Flash nenávidíme, ale hlavním cílem je vždy funkčnost a pro tento účel to bylo docela efektivní, takže musíme uznat, že to bylo slušné řešení. O několik let později máme lepší řešení bez Flash: clipboard.js.

Zobrazit ukázku

Rozhraní API clipboard.js pro kopírování do schránky je krátké a příjemné. Zde je několik použití:

Kopírování a vyjímání hodnot textové oblasti a vstupu

/* Textarea - Cut


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

/* Input - Copy


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

Kopírování prvku innerHTML

/* HTMLElement - Copy
hello

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

Target a Text Funkce

// 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!';
    }
});

Události

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

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

clipboard.on('error', function(e) {
    console.log(e);
});
Zobrazit ukázku

Žádný Flash s jednoduchým API a práce ve všech hlavních prohlížečích dělá z clipboard.js obrovskou výhru pro web a jeho uživatele. Doby funkce Flash shimming na straně klienta jsou pryč – ať žije webová technologie!