Interakce s hostitelskou schránkou uživatele je něco, co weboví vývojáři chtěli pro dobré i zlé účely. Na dobré straně je příjemné umožnit uživatelům snadno kopírovat text, jako jsou adresy peněženky nebo názvy poboček; pro zlo, zkopírování škodlivého textu, který uživatel může omylem vložit do formuláře a nechat mu být odcizeny – a pravděpodobně existují další špatné důvody.
Dříve jsme používali document.execCommand('copy') splnit tento úkol, ale bylo to nespolehlivé. navigator.clipboard API poskytuje asynchronní readText a writeText metody pro správu dat schránky. Pojďme se podívat, jak to funguje!
// Write to clipboard
document.body.addEventListener(
"click",
(e) => {
await navigator.clipboard.writeText("Yo")
}
)
// Read from clipboard
document.body.addEventListener(
"click",
(e) => {
const text = await navigator.clipboard.readText()
}
)
readText a writeText metody jsou dostatečně snadné na použití, ale tento kód nemůžete spustit, kdykoli byste chtěli, kvůli bezpečnostním protokolům prohlížeče. Často je potřeba tento kód použít uvnitř posluchače událostí v důsledku akce provedené uživateli.
Jsem rád, že nyní máme API, které je asynchronní a spolehlivější než hrubé execCommand nářez starých časů. Přesto si občas říkám, jak by se to dalo zneužít, protože přeci jen tam můžete dát jakýkoli text. Udělejme si však navzájem solidní výkon – používejte toto API k dobru, ne ke zlu!