logo

Kliknutím zkopírujete!

Čau lidi 👋

Přemýšleli jste někdy nad tím, jak některé webové stránky mají funkci „klikněte a zkopírujte“?

  • To můžete také udělat, ať už vytváříte webové stránky elektronického obchodu, kde chcete, aby uživatel klikl na tlačítko sdílení a napsal adresu URL produktu na svůj web.
  • nebo vytváříte nějakou webovou stránku/dokumentaci, na kterou mohou lidé kliknout a zkopírovat úryvek kódu.

V tomto článku vysvětlím, jak si můžete pohrát se schránkou uživatele 😄.

Začněme 🚀

Abych to lépe vysvětlil, vytvořím demo projekt. Pokud chcete, můžete je následovat.

  • Vytvořte si složku a pojmenujte ji, jak chcete.
  • V této složce vytvořte dva soubory
    • 1. index.html
    • 2. app.js

Přidejte následující kód HTML do index.html . 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Copy to Clipboard 📋</title>
    <style></style>
  </head>
  <body>
    <h2>Implementing copy to clipboard with a simple click 📋</h2>
    <button>Click to copy</button>
    <script src="./app.js"></script>
  </body>
</html>
  • Nyní vyberte h2 a button prvek v app.js :
const h2 = document.querySelector('h2');
const button = document.querySelector('button');

Náhled index.html ve vašem prohlížeči.

Mělo by to vypadat nějak takto 👇

Nyní ke změně uživatelské schránky musíme použít Clipboard API.

clipboard objekt je vystaven pomocí navigator.clipboard vlastnictví.

Přidejte následující kód do app.js soubor:

const cb = navigator.clipboard;
  • console.log(cb) bude vypadat nějak takto 👇

👉 Pamatujte:API schránky je asynchronní, což znamená, že každá metoda vrátí slib, který vyřeší nebo odmítne.
Ke spotřebě promise můžeme použít buď async/await syntaxe nebo .then/.catch .

Čtení textu ze schránky 📋

  • Pro čtení textu ze schránky přidám click posluchač událostí na button :
  • V posluchači událostí zavolám metodu nazvanou readText() , který je k dispozici na cb objekt, ke kterému jsme přistupovali dříve:
button.addEventListener('click', async () => {
  const text = await cb.readText();
  console.log(text);
    // output will be whatever you last copied, 
    // or empty string if the
    // copied data is not of type text.
});
  • Pro čtení textu ze schránky musí uživatel udělit read povolení, jinak operace selže. 👇
  • Pokud je povolení odepřeno 👇

Psaní textu do schránky 📋

  • Pro zápis textu do uživatelské schránky používáme writeText() metoda dostupná na cb objekt.
  • Povolení k zápisu uděluje automaticky prohlížeč.

Napište následující kód do app.js :

button.addEventListener('click', async () => {
  // const text = await cb.readText();
  // console.log(text);

  // writing the inner text of the h2 element
  // to the user's clipboard.  
    cb.writeText(h2.innerText).then(() => {
        console.log('text written to clipboard')
    })
});

To je pro tento článek vše, přátelé.

Podívejte se, jak snadné je zahrát si se schránkou uživatele 😂.

Díky ❤️, že jste si to přečetli, doufám, že vám to bylo užitečné.

Pro stručné tipy a triky mě prosím sledujte na Twitteru

Veselé kódování 💚