Clipboard API
Clipboard API предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через Permissions API:
clipboard-write (разрешение на запись) в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Для clipboard-read (чтение из буфера обмена) должно быть запрошено разрешение пользователя. Можно сделать запрос на разрешение, попытавшись прочитать данные из буфера обмена.API предназначен заменить document.execCommand() в качестве способа для доступа к буферу обмена.
Доступ к буферу обмена
Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный Navigator.clipboard (en-US):
navigator.clipboard.readText().then(
clipText => document.querySelector(".editor").innerText += clipText);Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью editor (редактора) классов. Этот код безопасен, поскольку readText() (en-US) (и read() (en-US), если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.
Интерфейсы
Clipboard(en-US) Secure context- Предоставляет интерфейс для чтения/записи текста и данных в системный буфер обмена. В спецификации называется 'Async Clipboard API (API асинхронного буфера обмена)'.
ClipboardEventSecure context- Представляет события, содержащие информацию, относящуюся к модификации буфера обмена, а именно
cut(en-US),copy(en-US) иpaste(en-US) события. В спецификации называется 'Clipboard Event API (API событий буфера обмена)'. ClipboardItem(en-US) Secure context- Представляет единый формат элемента, используемый при чтении или записи данных.
Спецификации
| Specification |
|---|
| Clipboard API and events # clipboard-interface |
Совместимость с браузером
Смотрите также
Clipboard
If you're able to see this, something went wrong on this page.
ClipboardEvent
If you're able to see this, something went wrong on this page.
ClipboardItem
If you're able to see this, something went wrong on this page.
- Async Clipboard API demo on Glitch (Демонстрация API асинхронного буфера на Glitch)
- Image support for Async Clipboard article (Поддержка изображений в асинхронном буфере обмена)
- Permissions API
- Using the Permissions API