Начиная с IE10 добавлена поддержка команд «Копировать» и «Вырезать» с помощью метода Document.execCommand(). Так же эти методы доступны в Chrome начиная с версии 43.
Любой текст выделенный в браузере при выполнении одной из этих команд будет скопирован или вырезан в буфер обмена пользователя. Это позволяет предложить пользователю простой метод выделить часть текста и скопировать в буфер обмена.
Это становится крайне полезным в сочетании с API программного выделения текста, что бы задать что скопировать в буфер. Примеры будут рассмотрены в этой статье.
Для примера, давайте добавим кнопку которая скопирует email адрес в буфер обмена.
Мы добавим email адрес, в наш HTML, с кнопкой клик по которой будет инициировать копирование email:
Тогда, в наш JavaScript, мы добавим обработчик клика по кнопке, который выделит email из содержимого ссылки js-emaillink, выполнит команду копирования, так что бы адрес электронной почты оказался в буфере пользователя и после этого снять выделение с электронной почты, так что пользователь даже не увидит выделение.
Здесь используется метод API выделения, window.getSelection(), что бы программно выделить текст внутри ссылки, который мы хотим скопировать в буфер обмена пользователя. После вызова document.execCommand() мы можем снять выделение с помощью window.getSelection().removeAllRanges().
Если вы хотите проверить что все прошло успешно, то вы можете рассмотреть результат возвращаемый функцией document.execCommand(). Результат будет false если функция не поддерживается или отключена. Мы «обвернули» execCommand() в try...catch, т.к. команды «вырезать» и «копировать» в некоторых случаях могут вернуть ошибку.
Команда «вырезать» может быть использована для текстовых полей ввода, там, где вы хотите удалить текст и поместить этот текст в буфер.
Использование textarea и кнопки:
Мы можем сделать следующее, что бы «вырезать» содержимое:
Перед вызовом document.execCommand() вы должны убедится что эти API поддерживаются с помощью document.queryCommandSupported(). В примере выше, мы могли бы заблокировать кнопку, по результатам проверки совместимости, например, так:
Отличие между queryCommandSupported() и queryCommandEnabled() в том, что команды «копировать» и «вырезать» могут поддерживаться браузером, но если текст не выделен, то они не будут доступны. Это удобно в том случае если вы не выбрали фрагмент текста программно и хотите что бы команда отработала ожидаемо, в противном случае показать сообщение пользователю.
IE 10+, Chrome 43+ и Opera 29+
Firefox поддерживает данные функции, но требует изменения настроек (см. тут) (Примечание переводчика: при этом довольно давно. Была даже функция чтения из буфера обмена, заблокированная по умолчанию в целях безопасности). Без этого Firefox вернет ошибку.
Safari не поддерживает данные команды.
Любой текст выделенный в браузере при выполнении одной из этих команд будет скопирован или вырезан в буфер обмена пользователя. Это позволяет предложить пользователю простой метод выделить часть текста и скопировать в буфер обмена.
Это становится крайне полезным в сочетании с 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.
- На данный момент вырезание текста доступно только если текст был выделен программно.
Комментарии (25)
hssergey
20.04.2015 04:39+1Если бы это было бы еще совместимо с мобильными браузерами, где в большинстве своем не поддерживается Flash…
JeStoneDev
20.04.2015 07:10+1Выглядит не менее ужасно, чем flash.
Видимо я не доживу до подобного API:
clipboard.copy(); // копировать текущее выделение clipboard.cut(); // вырезать текущее выделение, если в поле textarea, input, иначе скопировать clipboard.paste(); // вставить текст из буфера обмена по текущему положению курсора clipboard.put('text'); // сохранить переданный текст myVar = clipboard.get();// получить содержимое буфера в переменную
Sayonji
20.04.2015 08:05-1Paste точно никогда не будет.
Ualde
20.04.2015 09:11Вы не совсем правы.
Уже дали ссылку ниже, но поставлю акцент — w3c.github.io/clipboard-apis/#the-paste-action
ReklatsMasters
20.04.2015 08:55Уже дожили, Clipboard API. В Огнелисе работает достаточно давно, в самых новых Хром и, кажется, в старой Опере.
mavrin
21.04.2015 01:06В chrome, скрипт сработал даже в версии 42.0.2311.90 jsfiddle.net/541sbywh, а вот в IE досадно, если даже запретить выделение, операция возвращает true. А так можно было бы сделать для пользователей, у которых не сработал этот метод, предложить скопировать вручную.
mavrin
21.04.2015 01:23Хотя, если после операции проверить результат, то можно все таки этого добиться jsfiddle.net/541sbywh/2.
Demetros
Лично мне не совсем понятно, почему копирование в буфер вот уже много лет делается костыльными полуработающими методами.
edejin Автор
Просто по тому, что не было подобных API. Точнее были, но, по-моему, только в Firefox.
Вот тут на помощь и приходят Flash и Java, и начинаются «приседания» с версией…
И в каждом браузере свои настройки Java, Flash, да и безопасности в целом.
Как вы понимаете, давать доступ к буферу обмена пользователя, всем подряд, довольно смело.
Keyten
Мне почему-то кажется, что какой-то API на эту тему был ещё в IE6.
Не исключено, что какой-нибудь встроенный ActiveX.
PastorGL
С пятой версии IE поддерживал работу с буфером обмена через dataTransfer. msdn.microsoft.com/en-us/library/ms537658.aspx
Обычная история с IE… Собственный стандарт, сильно опередивший время, а теперь W3C спека делается с оглядкой на.
forgotten
Потому что говносайты будут бесконечно забивать буфер обмена своими «познакомься с горячими девушками в своём городе»
edejin Автор
Молотком можно гвозди забивать, а можно и человека убить.
Я думаю, что если дать пользователю возможность решать самому какой сайт может работать с буфером, а какой нет, то все будет не так плохо.
forgotten
По-моему, разнообразных разрешений в браузере и так многовато.
github.com/w3ctag/spec-reviews/issues/45
edejin Автор
Мне, как «тыжпрограммисту», стала немного проще жить после скандала с Амиго.
Пользователи стали внимательнее при установке программ.
Может после пары-тройки прецедентов с буфером люди еще поумнеют.
forgotten
> люди еще поумнеют
Кто-кто поумнеет? Люди???
edejin Автор
Я надеюсь.
В крайнем случае естественный отбор расставит все по своим местам.
Houston
К сожалению, естественный отбор выбирает тех, кто больше размножается, а не тех, кто умный. Корреляция между этими вещами слабо прослеживается)
forgotten
Вообще, прослеживается: зачем на самом деле нужен мозг. Только немного в другом смысле.
AlexP11223
Что за скандал?
edejin Автор
Первая попавшаяся ссылка привела меня сюда
23rd
Во флеше это решено так:
Isopropil
Ну, не всегда так было. Был (да и сейчас есть, кое-где, у самых упоротых) активХ, где это было не костыльными и полуработающими методами сделано. Да и не только это — а ещё и доступ к ФС, и системе в целом. Эх, скольким кулхацкерам это жизнь облегчило (да и сейчас кое-где облегчает) — аж не счесть. Золотое время было.