[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.

Sekcja 1Implementacja 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:

1
2
3
4

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.

Sekcja 2Inne 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.

Sekcja 3Podsumowanie

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ę).

Jeśli chcesz sprawdzić jak to działa na żywo, to zapraszam do wypróbowania poniższego demo:

Created by Sten Hougaard (@netsi1964) on CodePen.