Clipboard API

Baseline 2024

Newly available

Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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