Clipboard 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
BCD tables only load in the browser
ClipboardEvent
BCD tables only load in the browser
ClipboardItem
BCD tables only load in the browser
Смотрите также
- Async Clipboard API demo on Glitch (Демонстрация API асинхронного буфера на Glitch)
- Image support for Async Clipboard article (Поддержка изображений в асинхронном буфере обмена)
- Permissions API (en-US)
- Using the Permissions API (en-US)