Начиная с IE10 добавлена поддержка команд «Копировать» и «Вырезать» с помощью метода Document.execCommand(). Так же эти методы доступны в Chrome начиная с версии 43.
Любой текст выделенный в браузере при выполнении одной из этих команд будет скопирован или вырезан в буфер обмена пользователя. Это позволяет предложить пользователю простой метод выделить часть текста и скопировать в буфер обмена.
Это становится крайне полезным в сочетании с API программного выделения текста, что бы задать что скопировать в буфер. Примеры будут рассмотрены в этой статье.
Примеры
Для примера, давайте добавим кнопку которая скопирует email адрес в буфер обмена.
Мы добавим email адрес, в наш HTML, с кнопкой клик по которой будет инициировать копирование email:
<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, мы добавим обработчик клика по кнопке, который выделит 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 и кнопки:
<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'); Отличие между queryCommandSupported() и queryCommandEnabled() в том, что команды «копировать» и «вырезать» могут поддерживаться браузером, но если текст не выделен, то они не будут доступны. Это удобно в том случае если вы не выбрали фрагмент текста программно и хотите что бы команда отработала ожидаемо, в противном случае показать сообщение пользователю.
Совместимость с браузерами
IE 10+, Chrome 43+ и Opera 29+
Firefox поддерживает данные функции, но требует изменения настроек (см. тут) (Примечание переводчика: при этом довольно давно. Была даже функция чтения из буфера обмена, заблокированная по умолчанию в целях безопасности). Без этого Firefox вернет ошибку.
Safari не поддерживает данные команды.
Известные проблемы
- Вызов queryCommandSupported() для проверки доступности команд «копировать» и «вставить» всегда возвращает false (Примечание переводчика: специфика Chrome/Chromium. А вот, например, SeaMonkey 2.33.1 всегда отвечает true), даже после взаимодействия с пользователем. Это не позволит вам заблокировать элементы интерфейса для браузеров которые не поддерживают данные команды.
- Вызов queryCommandSupported() из консоли разработчика всегда возвращает false.
- На данный момент вырезание текста доступно только если текст был выделен программно.
ссылка на оригинал статьи http://habrahabr.ru/post/256027/
Добавить комментарий