[Перевод] Вырезать и копировать в буффер с помощью JavaScript
Начиная с IE10 добавлена поддержка команд «Копировать» и «Вырезать» с помощью метода Document.execCommand (). Так же эти методы доступны в Chrome начиная с версии 43.Любой текст выделенный в браузере при выполнении одной из этих команд будет скопирован или вырезан в буфер обмена пользователя. Это позволяет предложить пользователю простой метод выделить часть текста и скопировать в буфер обмена.
Это становится крайне полезным в сочетании с API программного выделения текста, что бы задать что скопировать в буфер. Примеры будут рассмотрены в этой статье.
ПримерыДля примера, давайте добавим кнопку которая скопирует email адрес в буфер обмена.Мы добавим email адрес, в наш HTML, с кнопкой клик по которой будет инициировать копирование email:
Email me at matt@example.co.uk
Тогда, в наш JavaScript, мы добавим обработчик клика по кнопке, который выделит email из содержимого ссылки js-emaillink, выполнит команду копирования, так что бы адрес электронной почты оказался в буфере пользователя и после этого снять выделение с электронной почты, так что пользователь даже не увидит выделение. var copyEmailBtn = document.querySelector ('.js-emailcopybtn'); copyEmailBtn.addEventListener ('click', function (event) { // Выборка ссылки с электронной почтой var emailLink = document.querySelector ('.js-emaillink'); var range = document.createRange (); range.selectNode (emailLink); window.getSelection ().addRange (range); try { // Теперь, когда мы выбрали текст ссылки, выполним команду копирования 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'); } // Снятие выделения — ВНИМАНИЕ: вы должны использовать // removeRange (range) когда это возможно window.getSelection ().removeAllRanges (); }); Здесь используется метод API выделения, window.getSelection (), что бы программно выделить текст внутри ссылки, который мы хотим скопировать в буфер обмена пользователя. После вызова document.execCommand () мы можем снять выделение с помощью window.getSelection ().removeAllRanges ().Если вы хотите проверить что все прошло успешно, то вы можете рассмотреть результат возвращаемый функцией document.execCommand (). Результат будет false если функция не поддерживается или отключена. Мы «обвернули» execCommand () в try…catch, т.к. команды «вырезать» и «копировать» в некоторых случаях могут вернуть ошибку.Команда «вырезать» может быть использована для текстовых полей ввода, там, где вы хотите удалить текст и поместить этот текст в буфер.Использование textarea и кнопки:
Мы можем сделать следующее, что бы «вырезать» содержимое: 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'); Отличие между queryCommandSupported () и queryCommandEnabled () в том, что команды «копировать» и «вырезать» могут поддерживаться браузером, но если текст не выделен, то они не будут доступны. Это удобно в том случае если вы не выбрали фрагмент текста программно и хотите что бы команда отработала ожидаемо, в противном случае показать сообщение пользователю.Совместимость с браузерами IE 10+, Chrome 43+ и Opera 29+Firefox поддерживает данные функции, но требует изменения настроек (см. тут) (Примечание переводчика: при этом довольно давно. Была даже функция чтения из буфера обмена, заблокированная по умолчанию в целях безопасности). Без этого Firefox вернет ошибку.
Safari не поддерживает данные команды.
Известные проблемы
