В 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 не поддерживает эти команды.