1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
---
title: Clipboard API
slug: Web/API/Clipboard_API
tags:
- API
- Async Clipboard API
- Clipboard
- Clipboard API
- Clipboard Event API
- ClipboardEvent
- ClipboardItem
- Cut
- Landing
- Reference
- copy
- paste
translation_of: Web/API/Clipboard_API
---
<div>{{DefaultAPISidebar("Clipboard API")}}</div>
<div></div>
<div><strong>Clipboard API </strong>предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>: <code>clipboard-write</code> (разрешение на запись) в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Для <code>clipboard-read</code> (чтение из буфера обмена) должно быть запрошено разрешение пользователя. Можно сделать запрос на разрешение, попытавшись прочитать данные из буфера обмена.</div>
<div></div>
<p>API предназначен заменить {{domxref("document.execCommand()")}} в качестве способа для доступа к буферу обмена.</p>
<h2 id="Доступ_к_буферу_обмена">Доступ к буферу обмена</h2>
<p>Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный {{domxref("Navigator.clipboard")}}:</p>
<pre class="brush: js">navigator.clipboard.readText().then(
clipText => document.querySelector(".editor").innerText += clipText);</pre>
<p>Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью <code>editor</code> (редактора) классов. Этот код безопасен, поскольку {{domxref("Clipboard.readText", "readText()")}} (и {{domxref("Clipboard.read", "read()")}}, если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.</p>
<h2 id="Интерфейсы">Интерфейсы</h2>
<dl>
<dt>{{domxref("Clipboard")}} {{securecontext_inline}}</dt>
<dd>Предоставляет интерфейс для чтения/записи текста и данных в системный буфер обмена. В спецификации называется 'Async Clipboard API (API асинхронного буфера обмена)'.</dd>
<dt>{{domxref("ClipboardEvent")}} {{securecontext_inline}}</dt>
<dd>Представляет события, содержащие информацию, относящуюся к модификации буфера обмена, а именно {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} и {{domxref("Element/paste_event", "paste")}} события. В спецификации называется 'Clipboard Event API (API событий буфера обмена)'.</dd>
<dt>{{domxref("ClipboardItem")}} {{securecontext_inline}}</dt>
<dd>Представляет единый формат элемента, используемый при чтении или записи данных.</dd>
</dl>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications("api.Clipboard")}}
<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
<h3 id="Clipboard">Clipboard</h3>
<div>
<p>{{Compat("api.Clipboard")}}</p>
<h3 id="ClipboardEvent">ClipboardEvent</h3>
<p>{{Compat("api.ClipboardEvent")}}</p>
<h3 id="ClipboardItem">ClipboardItem</h3>
<p>{{Compat("api.ClipboardItem")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on Glitch</a> (Демонстрация API асинхронного буфера на Glitch)</li>
<li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async Clipboard article</a> (Поддержка изображений в асинхронном буфере обмена)</li>
<li><a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a></li>
<li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li>
</ul>
</div>
|
