Команды вырезания и копирования

В IE10 и более поздних версиях добавлена ​​поддержка команд «вырезать» и «копировать» с помощью метода Document.execCommand() . Начиная с версии Chrome 43, эти команды также поддерживаются в Chrome.

Любой текст, выделенный в браузере при выполнении одной из этих команд, будет вырезан или скопирован в буфер обмена пользователя. Это позволяет предложить пользователю простой способ выделить часть текста и скопировать его в буфер обмена.

Это становится чрезвычайно полезным, если вы объедините его с API выбора для программного выбора текста и определения того, что копируется в буфер обмена, что мы рассмотрим более подробно позже в этой статье.

Простой пример

Для примера давайте добавим кнопку, которая копирует адрес электронной почты в буфер обмена пользователя.

Мы добавляем адрес электронной почты в наш HTML-код с кнопкой, которая запускает копирование при нажатии:

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

Затем в нашем JavaScript мы хотим добавить обработчик события щелчка к нашей кнопке, в котором мы выбираем текст адреса электронной почты из привязки js-emaillink , выполняем команду копирования, чтобы адрес электронной почты находился в буфере обмена пользователя, а затем отменяем выбор адрес электронной почты, чтобы пользователь не видел, как происходит выбор.

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();
});

Здесь мы используем метод Selection API , window.getSelection() , чтобы программно установить «выделение» текста на привязку, то есть текст, который мы хотим скопировать в буфер обмена пользователя. После вызова document.execCommand() мы можем удалить выделение, вызвав window.getSelection().removeAllRanges() . Если вы хотите убедиться, что все работает как положено, вы можете проверить ответ document.execCommand(); он возвращает false, если команда не поддерживается или не включена. Мы обертываем execCommand() в try and catch, поскольку в некоторых сценариях команды «вырезать» и «копировать» могут вызвать ошибку .

Команду «вырезать» можно использовать для текстовых полей, из которых вы хотите удалить текстовое содержимое и сделать его доступным через буфер обмена.

Использование текстового поля и кнопки в нашем HTML:

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

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

Чтобы вырезать контент, мы можем сделать следующее: 

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 и queryCommandEnabled

Прежде чем вызывать document.execCommand() , вы должны убедиться, что этот API поддерживается с помощью метода document.queryCommandSupported() . В нашем примере выше мы могли бы установить отключенное состояние кнопки на основе поддержки следующим образом:

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

Разница между document.queryCommandSupported() и document.queryCommandEnabled() заключается в том, что вырезание и копирование могут поддерживаться браузером, но если в данный момент текст не выделен, они не будут включены. Это полезно в сценариях, где вы не устанавливаете выделение текста программно и хотите, чтобы команда работала так, как ожидалось, в противном случае выводится сообщение пользователю.

Поддержка браузера

IE 10+, Chrome 43+, Firefox 41+ и Opera 29+ поддерживают эти команды.

Safari не поддерживает эти команды.

Известные ошибки