Přejít k navigační liště

Zdroják » JavaScript » Prostě to tam „pejstni“ aneb použití Clipboard API

Prostě to tam „pejstni“ aneb použití Clipboard API

Články JavaScript

Stručné představení práce se schránkou prostřednictvím W3C Clipboard API.

Nálepky:

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

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.

Komentáře

Subscribe
Upozornit na
guest
1 Komentář
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Bohumil Jahoda

Vkládání celých obrázků funguje zatím pouze ve Firefoxu.

Napříč prohlížeči (IE 11 i Chrome) je ale už docela dobře možné vkládat ze schránky screenshot či výřez.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.