Clipboard API

Clipboard API предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через Permissions API: clipboard-write (разрешение на запись) в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Для clipboard-read (чтение из буфера обмена) должно быть запрошено разрешение пользователя. Можно сделать запрос на разрешение, попытавшись прочитать данные из буфера обмена.

API предназначен заменить document.execCommand() в качестве способа для доступа к буферу обмена.

Доступ к буферу обмена

Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный Navigator.clipboard:

js
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

Смотрите также