Clipboard API
Clipboard API предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через Permissions API: clipboard-write
(разрешение на запись) в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Для clipboard-read
(чтение из буфера обмена) должно быть запрошено разрешение пользователя. Можно сделать запрос на разрешение, попытавшись прочитать данные из буфера обмена.
API предназначен заменить document.execCommand()
в качестве способа для доступа к буферу обмена.
Доступ к буферу обмена
Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный Navigator.clipboard
:
navigator.clipboard
.readText()
.then(
(clipText) => (document.querySelector(".editor").innerText += clipText),
);
Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью editor
(редактора) классов. Этот код безопасен, поскольку readText()
(и read()
, если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.
Интерфейсы
Clipboard
Secure context-
Предоставляет интерфейс для чтения/записи текста и данных в системный буфер обмена. В спецификации называется 'Async Clipboard API (API асинхронного буфера обмена)'.
ClipboardEvent
Secure context-
Представляет события, содержащие информацию, относящуюся к модификации буфера обмена, а именно
cut
,copy
иpaste
события. В спецификации называется 'Clipboard Event API (API событий буфера обмена)'. ClipboardItem
Secure context-
Представляет единый формат элемента, используемый при чтении или записи данных.
Спецификации
Specification |
---|
Clipboard API and events # clipboard-interface |
Clipboard API and events # clipboard-event-interfaces |
Clipboard API and events # clipboarditem |
Совместимость с браузерами
api.Clipboard
BCD tables only load in the browser
api.ClipboardEvent
BCD tables only load in the browser
api.ClipboardItem
BCD tables only load in the browser
Смотрите также
- Async Clipboard API demo on Glitch (Демонстрация API асинхронного буфера на Glitch)
- Image support for Async Clipboard article (Поддержка изображений в асинхронном буфере обмена)
- Permissions API
- Using the Permissions API