Jak kopírovat do schránky v JavaScriptu pomocí rozhraní API schránky

Úvod

Funkce kopírování/vkládání je bezpochyby jednou z nejběžněji používaných funkcí v moderních počítačích a týká se procesu kopírování/přenosu textu nebo obrázků z jedné části počítačové aplikace do druhé. V poslední době se stalo běžnou praxí programově kopírovat některý obsah do schránky uživatele, aby to nemusel.

Například aktivační a ověřovací kódy, které se objeví na stránce nebo e-mailu. Můžete je buď zkopírovat automaticky, nebo mít tlačítko, které někomu umožní zkopírovat obsah do schránky, takže ho nemusí kopírovat sám. Úryvky kódu jsou navíc skvělým příkladem obsahu, který byste mohli chtít zkopírovat do schránky!

Poznámka: Pokud nejste na localhost , nové rozhraní API schránky bude fungovat pouze v případě, že je váš web hostován v zabezpečené doméně (HTTPS ).

Kopírovat do schránky v JavaScriptu

Celý proces lze zjednodušit až na tlačítko (nebo jiný prvek), který spouští kód! Můžete to udělat také při načítání stránky , ale obecně se doporučuje být konzervativní, pokud jde o automatické propojení s uživatelem a provádění akcí, které ovlivňují jeho místní počítač (např. přidání něčeho do schránky):

<textarea id="content"></textarea>
<button onclick="copyToClipboard()">Copy</button>

<script>
  function copyToClipboard() {
    var copyText = document.getElementById("content").value;
    navigator.clipboard.writeText(copyText).then(() => {
        // Alert the user that the action took place.
        // Nobody likes hidden stuff being done under the hood!
        alert("Copied to clipboard");
    });
  }
</script>

Zde je však třeba říci více – jak to funguje, omezení, jak kopírovat obrázky atd. Ve zbytku průvodce se budeme zabývat přesně těmito.

Dříve se vývojáři JavaScriptu spoléhali na document.execCommand() . Relativně nové rozhraní API schránky byla nedávno vydána, aby byl přenos dat prostřednictvím kopírování/vkládání bezproblémový!

Čtení oprávnění prohlížeče

V závislosti na akci, kterou provádíte (čtení nebo zápis) pomocí rozhraní API schránky, je vždy vhodné zkontrolovat oprávnění prohlížeče, než se pokusíte o jakoukoli operaci. Chcete-li zkontrolovat, zda máte napište přístup, použijete navigator.permissions a dotaz na clipboard-write povolení:

navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
  if (result.state == "granted" || result.state == "prompt") {
    alert("Write access ranted!");
  }
});

Podobně můžete zkontrolovat, zda máte clipboard-read přístup také:

navigator.permissions.query({ name: "clipboard-read" }).then((result) => {
  if (result.state == "granted" || result.state == "prompt") {
    alert("Read access ranted!");
  }
});

Kopírování textu do schránky

Začněme kopírováním textu do schránky. Krátce jsme to viděli v prvním příkladu a ve skutečnosti to není o moc složitější. Kopírování textu pomocí nového rozhraní API schránky , používáme asynchronní writeText() a tato metoda přijímá pouze jeden parametr – text, který se má zkopírovat do schránky.

Protože je asynchronní, vrací příslib, který je vyřešen, pokud byla schránka úspěšně aktualizována, a v opačném případě odmítnut:

navigator.clipboard.writeText("TEXT_TO_COPY_TO").then(() => {
  /* Resolved - text copied to clipboard */
},() => {
  /* Rejected - clipboard failed */
});

Přečíst obsah schránky

Podobně jako při psaní můžete také číst obsah schránky. To vyvolává obavy o soukromí a měli byste být při používání této funkce v každém případě transparentní a opatrní. Možná budete chtít spojit psaní a čtení dohromady, abyste zajistili, že cokoli čtete, je pouze to, co jste již napsali.

Používáme readText() metoda pro čtení nejnovější položky ve schránce. Tato metoda také vrátí příslib, který se vyřeší, pokud má prohlížeč přístup k obsahu schránky, a v opačném případě se odmítne:

navigator.clipboard
  .readText()
  .then((copiedText) => {
        // Do something with copied text
   });

Na rozdíl od zápisu do schránky žádost o přečtení obsahu schránky prohlížeče navíc zobrazí jednorázovou výzvu s žádostí o souhlas uživatele, jak je znázorněno na obrázku níže:

Kopírovat obrázek a formátovaný text do schránky

Rychlý text odkazuje na textový obsah, který umožňuje stylování, jako je - tučné , kurzíva a podtržení , stejně jako různé rodiny písem a velikosti písem. Při kopírování textového obsahu může být ve formátu strukturovaný text formát, což znamená, že existuje více metadat týkajících se obsahu než jen samotný text.

Můžeme také použít write() API schránky metoda pro kopírování libovolných dat, jako je formátovaný text a obrázky, a tato funkce přijímá pouze jeden parametr, kterým je pole obsahující data, která mají být zapsána do schránky. writeText() metoda se specializuje na prostý text, zatímco write() může zapisovat libovolná data.

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Můžete například načíst obrázek ze vzdálené adresy URL a zkopírovat jej do schránky:

const copyImage = async () => {
    const response = await fetch("/path/to/image.png");
    const blob = await response.blob();
    await navigator.clipboard.write([
      new ClipboardItem({ "image/png": blob }),
    ]);
  };

Výše uvedený příklad funguje také pro kopírování formátovaného textu, když změníte typ položky na "text/html" :

const copyRichText = async () => {
    const content = document.getElementById("richTextInputId").innerHTML;
    const blob = new Blob([content], { type: "text/html" });
    const richTextInput = new ClipboardItem({ "text/html": blob });
    await navigator.clipboard.write([richTextInput]);
};

To předpokládá, že richTextInputId prvek podporuje samotný formátovaný text.

Číst obrázek a formátovaný text ze schránky

Rozhraní API schránky také poskytuje zvláštní read() metoda, která se používá ke čtení libovolných dat spíše než prostého textu a funguje podobně jako předchozí readText() funkce, ale může číst libovolná data. Chcete-li například přečíst obrazová data, která byla dříve zkopírována do schránky:

<img src="" alt="" id="sample-img" />
<script>
const img = document.getElementById("sample-img");
  navigator.clipboard.read().then((data) => {
  for (let i = 0; i < data.length; i++) {
    if (!data[i].types.includes("image/png")) {
      // Clipboard does not contain image data
    } else {
      data[i].getType("image/png").then((blob) => {
          img.src = URL.createObjectURL(blob);
      });
    }
  }
});
</script>

Závěr

V tomto krátkém průvodci jsme byli schopni pokrýt proces kopírování textu a dalších dat, jako jsou obrázky, do schránky pomocí nového rozhraní API schránky. Kdykoli píšete nebo čtete z místního počítače uživatele – buďte opatrní, abyste postupovali transparentně a bezpečně!