[JS] Jak skopiować tekst do schowka używając JavaScript?

Tworząc różnego rodzaju aplikacje internetowe czasem istnieje potrzeba aby zaimplementować mechanizm kopiowania tekstu do schowka za pomocą jakiegoś przycisku. Jeszcze nie tak dawno najbardziej uniwersalnym rozwiązaniem było rozwiązanie bazujące na kombinacji JS i Flash. Na szczęście to już przeszłość.

W chwili obecnej możemy wykorzystać natywny sposób na kopiowanie tekstu oparty o JavaScript. Swego czasu napisałem artykuł o kopiowaniu tekstu w którym opisałem jak wykorzystać JS do modyfikacji kopiowanego tekstu tak aby dołączyć jakiś dodatkowy tekst, np. o źródle pochodzenia skopiowanego tekstu.

Implementacja skryptu kopiowania tekstu w JS

W tym wpisie zamierzam się jednak skupić na kopiowaniu tekstu z pól formularza. Kod JS obsługujący takie zachowanie jest bardzo prosty:

var textField = document.querySelector('input');
 
textField.select();
document.execCommand('copy');

I tak naprawdę to byłoby wszystko. Wyszukujemy element HTML typu input a następnie zaznaczamy tekst i kopiujemy. Co ciekawe, funkcja execCommand() może przyjąć inne wartości oprócz copy.

Inne polecenia dla `execCommand()`

Zanim będziemy w stanie uruchomić polecenia, to warto najpierw włączyć designMode dla dokumentu na którym mają być odpalane funkcje execCommand(). Aby odblokować edytowanie wystarczy uruchomić poniższą linijkę w kodzie JS:

1	document.designMode = 'on'; / aby wyłączyć należy ustawić wartość na `off`

Jedną rzecz, na którą warto zwrócić uwagę to ilość przyjmowanych przez funkcję parametrów. Wymagany jest jeden parametr z nazwą akcji do wykonania. W zależności od wybranej akcji może istnieć potrzeba dodania dodatkowych informacji w postaci dodatkowych parametrów. List wszystkich parametrów wygląda następująco - execCommand(command, showDefaultUI, actionValue):

command: Nazwa akcji do wykonania. Lista dostępnych akcji została przedstawiona poniżej. Wymagane.
showDefaultUI: Flaga która wskazuje na to, czy powinien pojawić się domyślny interefejs użytkownika. Opcjonalne.
actionValue: W przypadku wybrania akcji, która wymaga przekazania wartości to możemy ją przekazać jako trzeci parametr metody.

Teraz możemy próbować uruchomić funkcję execCommand() z jedną z poniższych wartości parametru:

styleWithCss: Pozwala wpływać na wybrać element strony zamiast na cały dokument.
copy: Kopiuje zaznaczony tekst do schowka.
cut: Wycina zaznaczony tekst.
delete: Usuwa zaznaczony tekst.
paste: Wkleja w wybrane miejsce tekst ze schowka.
redo: Powtarza ostatnio wykonaną akcję.
undo: Cofa ostatnio wykonaną akcję.
unlink: Usuwa link z wybranego elementu.

To tylko część z możliwych wartości do ustawienia. Jeśli chcesz poznać wszystkie możliwe wartości to warto zajrzeć na stronę Mozilli.

Podsumowanie

Podsumowując, wykorzystywanie execCommand() pozwala w łatwy sposób edytować, kopiować do schowka tekst na potrzeby dalszej przeróbki przez użytkownika. Jest to szczególnie przydatne w aplikacjach pozwalających na edycję treści i na platformach e-learningowych (przynajmniej ja to tak widzę).