Kopiowanie do schowka w JavaScript – jQuery zClip

jQuery zClip

Poziom średnio-zaawansowany

Dziś szybki tutorial na temat kopiowania do schowka w JavaScript. Czasami podczas pracy nad aplikacją WWW może pojawić się wymaganie, aby możliwe było skopiowanie danych do schowka programowo z poziomu JavaScript, po zajściu jakiegoś zdarzenia.

Kopiowanie do schowka w JavaScript

Chciałbym pisać możliwie dużo o jQuery, gdyż jest to mój ulubiony framework JavaScript.

Kopiowanie do schowka w JavaScript o którym dziś piszę bazuje właśnie na jQuery, a konkretnie na rozwiązaniu jQuery zClip (jQuery ZeroClipboard).

Kopiowanie danych do schowka – użycie zClip

Wykonanie zadania kopiowania danych do schowka w samym JavaScript napotyka szereg problemów związanych głównie z bezpieczeństwem.

Rozwiązanie zClip bazuje na obiekcie Flash (plik SWF) wykonującym właściwe zadanie, natomiast sterowanie nim pozostaje na poziomie skryptu JavaScript.

Krok 1

Pobieramy bibliotekę ze strony projektu:

http://www.steamdev.com/zclip/

W przypadku problemów możemy także pobrać kod prosto z GitHub’a:

https://github.com/patricklodder/jquery-zclip

Następnie dołączamy jQuery i pobraną bibliotekę do projektu:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="zclip/jquery.zclip.js"></script>

Krok 2

Przygotowujemy elementy prostego UI:

<body>
  <h4>Test kopiowania do schowka w JavaScript</h4>

  <a href="#" id="copy-link-wrap">
    <input name="toclip" id="toclip" type="text" 
      value="Dane testowe - do skopiowania" style="width: 320px">
    <br />
    <p id="copy-link" style="cursor: hand">Skopiuj do schowka</p>
  </a>
...

</body>

W przykładzie będziemy kopiować do schowka wartość pola tekstowego.


Krok 3

Następnie dodajemy kod obsługi:

$(document).ready(function() {
  $("#copy-link-wrap").zclip({
    path: 'zclip/ZeroClipboard.swf',
    copy: $('#toclip').val(),
    afterCopy: function() {
      // console.log('copied');
      alert('Dane w schowku. Możesz je teraz wklejać...');
    }
  });
});

Plugin został zastosowany do całego elementu copy-link-wrap. Należy określić poprawną ścieżkę do pliku .swf, wartość która zostanie skopiowana (copy: $(‚#toclip’).val()) oraz zdefiniować akcję do wykonania po skopiowaniu danych.

Krok 4

Umieszczamy online i testujemy:

http://directcode.eu/samples/javascript-clipboard/index.html

Pliki do pobrania tutaj.

Podsumowanie

I tym samym mamy rozwiązanie realizujące programowe kopiowanie do schowka w JavaScript.

Są oczywiście różne dobre pomysły rozwiązań i być może wkrótce doczekamy się jednolitego standardu obsługującego schowek z poziomu JavaScript we wszystkich przeglądarkach.

Trzeba także przyznać, że kreatywność programistów w wynajdowaniu sposobów jest wysoka, na przykład:

http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript

Póki co rozwiązań cross-browser tego typu musimy szukać na własną rękę, a dziś zaproponowaliśmy jedno z nich.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.