Polecenia wycinania i kopiowania

Obsługa „cięcia” w przeglądarce IE10 i nowszych i „Kopiuj” za pomocą polecenia Document.execCommand() . Od wersji Chrome 43 te polecenia są też obsługiwane w Chrome.

Każdy tekst zaznaczony w przeglądarce po wykonaniu jednego z tych poleceń zostanie wyciętych lub skopiowanych do schowka użytkownika. Dzięki temu użytkownik może w prosty sposób aby zaznaczyć fragment tekstu i skopiować go do schowka.

W połączeniu z interfejsem Selection API staje się to bardzo przydatne, automatycznie zaznaczać tekst, aby określić, co zostanie skopiowane do schowka omówimy to bardziej szczegółowo w dalszej części tego artykułu.

Prosty przykład

Na przykład dodajmy przycisk, który kopiuje adres e-mail do do schowka użytkownika.

Dodajemy adres e-mail w kodzie HTML z przyciskiem powodującym kopiowanie po jego kliknięciu:

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

W JavaScripcie dodajemy moduł obsługi zdarzeń kliknięcia wybieramy tekst adresu e-mail z kotwicy js-emaillink, wykonaj kopię dzięki czemu adres e-mail znajduje się w schowku użytkownika, usunąć zaznaczenie adresu e-mail, aby użytkownik nie widział wyboru.

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

Używamy metody interfejsu Selection API, window.getSelection() aby automatycznie ustawić „zaznaczenie” do kotwicy, czyli tekstu, który które chcesz skopiować do schowka użytkownika. Po wywołaniu document.execCommand() można usunąć wybór, łącząc się window.getSelection().removeAllRanges(). Jeśli chcesz się upewnić, że wszystko działa zgodnie z oczekiwaniami, przejrzyj odpowiedź document.execCommand(); jeśli polecenie nie jest obsługiwane lub włączone. Metodę execCommand() dodajemy do metody ”. i „Kopiuj” polecenia mogą spowodować błąd, w kilku sytuacjach.

Krótkie cięcia może być używane w polach tekstowych, z których chcesz usunąć i udostępniać je ze schowka.

Zastosowanie pola tekstowego i przycisku w kodzie HTML:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

Aby wyciąć treści, możemy wykonać te czynności:

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
    var successful = document.execCommand('cut');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Cutting text command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to cut');
    }
});

queryCommandSupported i queryCommandEnabled

Przed wywołaniem funkcji document.execCommand() sprawdź, czy ten interfejs API jest jest obsługiwany przez document.queryCommandSupported() . W powyższym przykładzie możemy ustawić stan wyłączenia przycisku na podstawie: możesz uzyskać pomoc w taki sposób:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

Różnica między document.queryCommandSupported() oraz document.queryCommandEnabled() że wycinanie i kopiowanie może być obsługiwane przez przeglądarkę, ale jeśli nie jest zaznaczony żaden tekst, nie zostaną one włączone. Jest to przydatne w sytuacjach, w których automatycznie zaznaczać tekst i chcesz użyć polecenia będzie działać zgodnie z oczekiwaniami, w przeciwnym razie wyświetli użytkownikowi komunikat.

Obsługa przeglądarek

Polecenia te obsługują przeglądarki IE 10 i nowsze, Chrome 43 i nowsze, Firefox 41 i nowsze oraz Opera 29 i nowsze.

Safari nie obsługuje tych poleceń.

Znane błędy