Borek Bernard včera na Twitteru nadhodil téma pokročilé práce se schránkou, která je součástí Clipboard API.

Pár vlaštovek (Google, YouTrack) už umějí obrázky "uploadnout" prostým Ctrl+V, moc se těším, až se tohle rozšíří. #uploadSouboruJeOpruz

— Borek Bernard (@borekb) January 8, 2015

Dnes na to navážeme a předvedeme vám, jak snadno se v JavaScriptu se schránkou pracuje. Návod vychází z jednotlivých textů na developer.tizen.org, které jsou pod CC BY 3.0, ukázky kódu pak jsou pod BSD-3-Clause.

Vkládání ze schránky

Pokud chcete kontrolovat vkládání textu (a v budoucnu i jiného obsahu) ze schránky, zaregistrujte si obsluhu události paste na úrovni dokumentu.

   document.addEventListener("paste", function(e)
   {
      pasteHandler(e);
   }, false);

Následný kód ukazuje nejjednodušší obsloužení události. Vypne výchozí handler prohlížeče a vloží textový obsah schránky do stránky.

function pasteHandler(e) 
   {
      e.preventDefault();
      pasteTarget.innerHTML = e.clipboardData.getData("text/plain");
   };    

Volání preventDefault ve vaší aplikaci si musíte dobře rozmyslet, jeho nerozumným použitím byste mohli uživateli zabránit práci se schránkou např. v běžných formulářových polích. Proto preventDefault  volejte jen v případech, kdy celou událost opravdu kompletně obsluhujete (např. jen v případě, když má fokus vámi obsluhovaný UI prvek).

Pro tuhle i další události platí, že nevíte, jak uživatel ve skutečnosti událost vyvolal. Mohlo k tomu dojít klávesovou zkratkou, pomocí myši či jinak (hlasovým povelem apod.). API vás od těchto detailů odstiňuje.

Podrobnosti k použití najdete ve specifikaci.

Kopírování do schránky

Nejprve si zaregistrujte obsluhu události copy:

   document.addEventListener("copy", function(e)
   {
      copyHandler(e);
   }, false);

Vlastní obsluha události může vypadat například následovně. K obsahu vkládanému do schránky musíte přiřadit jeho MIME typ.

   function copyHandler(e) 
   {
      e.preventDefault();

      var range = window.getSelection();
      e.clipboardData.setData("text/plain", range);
   };
</script>

K volání preventDefault se vztahuje totéž co v případě události paste.

Podrobnosti k použití najdete ve specifikaci.

Vyjmutí do schránky

Vyjmutí probíhá podobně jako kopírování. Registrujte si obsluhu události:

   document.addEventListener("cut", function(e) 
   {
      cutHandler(e);
   }, false);

Obsluha události se zásadně neliší:

 function cutHandler(e) 
   {
      e.preventDefault();

      var range = window.getSelection();
      e.clipboardData.setData("text/plain", range);
      // následovalo by vyjmutí obsahu ze stránky
   };   
</script>

Podrobnosti k použijí najdete ve specifikaci.

Ukázka

Uvedený kód si můžete vyzkoušet v online ukázce. Události schránky jsou v ní obslouženy jen jako – zobrazují se v logu ukázky.

Podpora v prohlížečích

Barvy na Can I use sice vypadají na první pohled optimisticky zeleně, ale to jen do té doby než si všimneme, že většina prohlížečů obsahuje jen částečnou podporu specifikace (ostatně ta se stále vyvíjí).

Použití událostí zmiňovaných zde v článku by neměl být problém v žádném současném prohlížeči, ale pokročilejší funkce (např. ono vkládání obrázků, které zmiňoval Borek Bernard ve svém tweetu) jsou zatím hudbou budoucnosti.