Witaj Gościu Zaloguj się lub zarejestruj się.
Zaloguj

Kopiowanie do schowka za pomocą JavaScript

Kopiowanie do schowka za pomocą JavaScript

Nie łatwo odnaleźć skrypt JavaScript, który potrafiłby przenieść wybraną przez nas zawartość do schowka dowolnego systemu operacyjnego za pomocą dowolnej przeglądarki.

W związku z nadchodzącymi projektami w laboratorium, byłem zmuszony do wzmożonych poszukiwań i znalazłem rozwiązanie problemu, które jest jednocześnie proste i wygodne w użyciu.

Przedstawienie problemu

Czasami mamy treści, które przedstawiamy użytkownikom naszego serwisu do skopiowania. Wiadomo, że zaznaczanie i wciskanie skrótu klawiszowego ctrl + c może być uciążliwe, szczególnie w przypadku, gdy musimy zrobić to wielokrotnie. Z pomocą w takiej sytuacji może przyjść skypt, który skopiuje zawartość tekstową przez nas wybraną do schowka za pomocą przycisku, który użytkownik naciśnie. Rozwiązanie proste, które w bardzo ciekawy sposób ułatwia pracę. Jednak pytanie brzmi - jak to zrobić? Trzeba zacząć od poszukiwań.


Moje zdziwienie podczas poszukiwań

Jak zwykle, zacząłem poszukiwać najlepszego rozwiązania. Jestem zdania, że wiele rzeczy da się zrobić bez używania biblioteki JQuery i dodawania kolejnych cennych KB do wagi strony. Przecież nie każdy z nas ma potężne łącze, a nawet jeśli, to niekoniecznie ma ochotę czekać, aż strona się załaduję lub będzie mu spowalniała cały komputer milionami skryptów. Wyszukiwanie w Google nie przyniosło zbyt dużo wyników. Udało mi się jednak znaleźć kilka rozwiązań. Nawet nie wiecie, jakie było moje zdziwienie, gdy znalazłem skrypt, który wykonuje zadanie bez jakiegokolwiek problemu w przeglądarce... Internet Explorer. Jak widać, ta czarna owca też czasami potrafi nas (pozytywnie) zaskoczyć. Można to zrobić za pomocą następującego skryptu:

Powyższa funkcja szuka zmiennej clipboardData, która jest tylko i wyłącznie dostępna w przeglądarce IE i nadaje wartość atrybutowi text. To wszystko sprawia, że użycie tego w praktyce za pomocą kodu HTML jest banalnie proste. Wystarczy wyznaczyć hiperłącze, które za pomocą atrybutu onclick wykona całą pracę.

Podsumowując, prościej być nie może. Mimo tego, niewiele osób potrzebuje funkcjonalności kopiowania do schowka tylko w jednej przeglądarce, szczególnie w IE, który z dnia na dzień traci użytkowników na rzecz głównie Google Chrome. Tak więc, nie mogłem użyć tego rozwiązania.


Rozwiązanie uniwersalne dla wszystkich przeglądarek - Zero Clipboard

W swoich żmudnych poszukiwaniach znalazłem takie rozwiązanie, które działa w każdych warunkach, niezależnie od systemu operacyjnego i przeglądarki. Nazywa się Zero Clipboard i jest otwartym projektem umieszczonym na GitHubie.

Zasada jego działania jest prosta. Nie korzysta tylko i wyłącznie z czystego Javascript - korzysta z niewidzialnego filmu Flash, za pomocą którego przemyca do schowka użytkownika tekst, który nas interesuje. Oczywiście nic nie dzieje się samodzielnie, użytkownik musi kliknąć na odpowiedni przycisk, który wykona pracę.


Implementacja

 

Krok pierwszy to pobranie pakietu z github. Wchodzimy pod adres Zero Clipboard i naciskamy na ikonkę pobierania w zipie, którą widzisz na poniższym obrazku.

Pobierz Zero Clipbiard z GitHub
 

Przeniesienie do odpowiedniego folderu w naszym katalogu odpowiednich plików. Które są niezbędne?

  • ZeroClipboard.min.js - skrypt wykonujący całą niezbędną pracę
  • ZeroClipboard.swf lub ZeroClipboard10.swf - jeżeli chcesz kopiować tylko tekst, to wystarczy pierwszy, jednak jeżeli chcesz kopiować tekst z zawartością HTML, to skopiuj drugi

To wszystko, reszta jest nam aktualnie zupełnie niepotrzebna. Kopiujemy w odpowiednie miejsca i przechodzimy do kolejnego kroku


 

Dodanie skryptu do naszej sekcji HEAD. Otwieramy nasz plik .html lub ten, który posiada nagłówek i w sekcji HEAD wpisujemy następujący kod:

}]]>

Pamiętaj, aby podmienić tekst sciezka_do_pliku odpowiednim adresem bezpośrednim do miejsca, gdzie znajduje się plik, który przed chwilą skopiowałeś.


 

Następnie dodamy kontener, który będzie przechowywał nasz tekst oraz przycisk/hiperłącze, po którego kliknięciu zostanie z niego skopiowana zawartość.

Kontenerem zawierającym tekst do skopiowania nie musi być koniecznie div. Może to być dowolny znacznik posiadający zawartość. W naszym przypadku, aby wybrać go za pomocą JavaScript nadaję mu atrybut id, choć mógłbym to również zrobić za pomocą zaznaczenia dowolnego znacznika o nazwie klasy lub nawet bez nazwy klasy. Ja jednak zalecam Ci zrobienie tego w taki sposób, w jaki zrobiłem to ja - jest to najprostsza metoda w tej sytuacji.


 

Sporządzenie skryptu. W znacznikach script pod naszym kontenerem wpisujemy następujące treści

Ostrzeżenie Ostrzeżenie Jeżeli powyższy skrypt znajdzie się w kodzie powyżej kontenera, którego zawartość ma być skopiowana - skrypt może nie zadziałać. Pamiętaj, aby umieścić go w odpowiednim miejscu!

Pierwsza linijka to definiowanie umiejscowienia filmu na naszym serwerze. Za jego pomocą skrypt umieści go w odpowiednim miejscu, dokładniej mówiąc do zdefiniowanego przez nas na samym końcu elementu, po którego przyciśnięciu będzie skopiowana zawartość do schowka. Druga linijka to inicjacja klienta, za pomocą którego będzie obsługiwane zadanie. Możemy ich stworzyć więcej i wtedy korzystać z kilku miejsc do kopiowania zawartości. Ostatnie linijki to obsługa zdarzeń dla różnego rodzaju przeglądarek, która sprawia, że po kliknięciu myszą, tekst z kontenera zostanie skopiowany do schowka.

Ostrzeżenie Ostrzeżenie Przy definiowaniu kolejnych klientów, zrób to za pomocą nowej zmiennej, np. clip2. Pamiętaj, aby później w skrypcie konsekwentnie odwoływać się do zmiennej, której chcesz użyć, gdyż w przeciwnym wypadku skrypt może nie zadziałać.

To już wszystko, nasz skrypt tak napisany i zapisany powinien bez problemu działać. Jak widzisz implementacja nie jest wcale trudna, wręcz przeciwnie, jest bardzo prosta i zajmuje dosłownie chwilę. Najwięcej czasu zajmują poszukiwania odpowiedniego skryptu - mam nadzieję, że szybko udało Ci się dotrzeć na nasz blog i odnaleźć najlepsze rozwiązanie ;)

Podsumowując

Mamy działający skrypt, który bez problemu działa na wszystkich przeglądarkach i systemach operacyjnych. Niestety, użycie słowa wszystkich jest nieco przesadzone. Dlaczego? Ponieważ powyższy sposób, choć aktualnie najlepszy, niesie ze sobą 2 wady. Jakie? Po pierwsze nie zadziała zarówno u użytkowników, którzy mają wyłączone wykonywanie skryptów JavaScript jak i tych, którzy nie posiadają zainstalowanej wtyczki Flash. Skutki tego odczują szczególnie Ci, którzy korzystają z urządzeń mobilnych, które zazwyczaj nie mają w.w. wtyczki Flash. Coś za coś - na chwilę obecną nie ma lepszego rozwiązania, gdyż przeglądarki przez sandbox wzbraniają się przed możliwością kopiowania zawartości do schowka, a flash jest najprostszym i jedynym w tej chwili rozwiązaniem. Drugą wadą jest natomiast fakt, że kopiować do schowka możemy tylko i wyłącznie tekst ew. z dodatkami HTML. Wyklucza to więc jakiekolwiek obrazki i inne elementy. Na szczęście rzadko potrzebujemy takiej funkcjonalności.

Co ważne, powyższe rozwiązanie można uznać za uniwersalne. Nawet jeżeli użytkownik nie będzie mógł skopiować tekstu za pomocą przycisku, to na pewno uda mu się to za pomocą standardowego zaznaczenia i skrótu ctrl + c. Mam nadzieję, że ten wpis rozjaśnił Ci nieco sprawę związaną z kopiowaniem zawartości do schowka i ułatwi życie podczas kolejnych projektów, w których taka funkcjonalność będzie u Ciebie wymagana. Zapraszam Cię do komentowania i wyrażania swojej opinii, w jaki sposób i gdzie używasz takiego skryptu podczas swojej pracy.

Inne wpisy, które mogą Cię zainteresować

Poniżej przedstawiamy Ci propozycje innych wpisów, które mogą Cię zainteresować. Sprawdź, czytaj i poszerzaj swoją wiedzę.


Czytaj
Kilka porad, by Twoje portfolio stało się jeszcze lepsze!

Kilka porad, by Twoje portfolio stało się jeszcze lepsze!

Czytaj
Era wyświetlaczy HiDPI. Jak się do niej przygotować?

Era wyświetlaczy HiDPI. Jak się do niej przygotować?

Czytaj
Szewc bez butów chodzi... A Ty?

Szewc bez butów chodzi... A Ty?

Czytaj
Wesołych Świąt 2012!

Wesołych Świąt 2012!

Komentarze do tego wpisu


comments powered by Disqus