search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

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

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.

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

JS execCommand support

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.

  • execCommand jest tak bardzo złe, że… nikt tego nie używa 😉 Np. w CKEditorze wszystko implementujemy sami (pogrubienie, wstawianie akapitów itd). Wszystko z powodu tego, że execCommand generuje różny kod HTML w zależności od przeglądarki – i nigdy nie jest to kod najwyższej jakości… Do tego dochodzi kompatybilność: różne przeglądarki obsługują różne komendy. Dlatego lepiej zaimplementować te rzeczy samemu. Jedynie wycinanie i kopiowanie bez execCommand trudno zrobić.

    I tu ciekawostka: wklejać się już nie da 😉 Chociaż Chrome twierdzi, że komendę paste obsługuje, to tak naprawdę nic nie robi. A Firefox mówi już oficjalnie, że nie obsługuje.

  • Widziałem już to w kilku projektach. Z reguły właśnie jest to wykorzystywane do kopiowania tekstu. O innych rzeczach wspomniałem bardziej jako o ciekawostce. O różnicach w tym jaki jest output tej komendy jest trochę napisane na stronie Mozilli którą podlinkowałem. Do tego dodałem demo, aby każdy mógł sobie sprawdzić jak to działa 🙂
    Dzięki za komentarz 🙂

  • Adam

    A mnie zaciekawiło to „styleWithCSS” szukam szukam, ale nic nie znajduję co by mi pomogło w jego zrozumieniu. Może jakiś mały przykładzik? 😉

  • https://jsfiddle.net/Comandeer/mwgtct6w/

    styleWithCSS nakazuje przeglądarce używać do stylowania (czyli komend bold itp.) CSS-a (np. <span style=”font-weight: bold;”>). W innym wypadku przeglądarka będzie używać odpowiednich tagów HTML (np. <b>).

  • Adam

    No i wszystko jasne, dziękuję 😉

  • Bardzo ciekawe rozwiązanie.