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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
title: Interact with the clipboard
slug: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
translation_of: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
---
<div>{{AddonSidebar}}</div>
<p>Існує два шляхи взаємодії веб-додатків з буфером обміну: {{domxref("Document.execCommand()")}} метод і новітній асинхронний <a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a>.</p>
<p>{{domxref("Document.execCommand()")}} може використовуватись, бажано з наступними командами:</p>
<ul>
<li><code>document.execCommand("copy")</code></li>
<li><code>document.execCommand("cut")</code></li>
<li><code>document.execCommand("paste")</code></li>
</ul>
<p>Clipboard API надає асинхронний доступ считування та запису прямо в буфер обміну. Наприклад, щоб зчитати текст з буферу обміну виконайте:</p>
<pre class="brush: js">navigator.clipboard.readText().then(text => outputElem.innerText = text);</pre>
<p>Ця команда запитує текст в буфері та, та коли відповідь надійде з буферу, вона буде записана прямісенько в елемент {{domxref("Node.innerText", "innerText")}}.</p>
<div class="note">
<p><strong>Примітка:</strong> Асинхронний Clipboard API метод нещодавно доданий в специфікацію, і може ще працювати не в усіх веб-оглядачах. Запевнетесь щодо кожного методу в таблиці сумісності перед тим як використовувати його.</p>
</div>
<h2 id="Запис_в_буфер_обміну">Запис в буфер обміну</h2>
<p>Існує два шляхи запису в буфер обміну. Ви можете використати {{domxref("Document.execCommand", "document.execCommand()")}} для запиту "cut" та "copy" дій, які замінюють контент в буфері із виділенним даними. Інша опція це Clipboard API's {{domxref("Clipboard.writeText()")}} чи {{domxref("Clipboard.write()")}}.</p>
<h3 id="Використання_execCommand()">Використання execCommand()</h3>
<p>{{domxref("Document.execCommand", "document.execCommand()")}} метод <code>"cut"</code> та <code>"copy"</code> команди можуть бути використані для заміни буферу із виділенними даними. Ці команди можуть бути виконані без будь яких дозволів, якщо ви використовуєте їх короткочасних обробниках дій користувача(наприклад, обробник кліку).</p>
<p>Наприклад HTML:</p>
<pre class="brush: html"><input id="input" type="text"/>
<button id="copy">Copy</button>
</pre>
<p>Із кнопкою <code>"copy"</code> яка копіює контент {{HTMLElement("input")}} елементу, ви можете використати код такий як:</p>
<pre class="brush: js">function copy() {
var copyText = document.querySelector("#input");
copyText.select();
document.execCommand("copy");
}
document.querySelector("#copy").addEventListener("click", copy);</pre>
<p>Тому що <code>execCommand()</code> виклик знаходится всередені обробника кліку, вам не потрібні ніякі спеціальні дозволи.</p>
<p>Однак, якщо наприклад замість того ви копіюєте з alarm:</p>
<pre class="brush: js">function copy() {
var copyText = document.querySelector("#input");
copyText.select();
document.execCommand("copy");
}
browser.alarms.create({
delayInMinutes: 0.1
});
browser.alarms.onAlarm.addListener(copy);</pre>
<p>Залежно від веб-оглядача, це може не спрацювати. У Firefox, це не спрацює, і ви побачете повідомлення помилки як:</p>
<pre>document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.</pre>
<p>Щоб надати можливість виконати це, вам потрібно запитати дозвол <code>"clipboardWrite"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. Тож: <code>"clipboardWrite"</code> дозволяє копіювати поза простих обробників дій користувача.</p>
<h3 id="Використання_Clipboard_API">Використання Clipboard API</h3>
<p>Clipboard API додає більшу гнучкість, в такому разі ви не обмежені лише в копіюванні поточного виділення в буфер обміну, ви маєте також можливість вказати будь яку інформацію внести в буфер.</p>
<p>Використання API потребує дозволу "clipboardRead" чи "clipboardWrite" в вашому manifest.json файлі.</p>
<p>Для страничних скриптів, Permissions API's потребує дозвіл <code>"clipboard-write"</code>. Ви можете запросити дозвіл з {{domxref("Permissions.query", "navigator.permissions.query()")}}:</p>
<pre class="brush: js">navigator.permissions.query({name: "clipboard-write"}).then(result => {
if (result.state == "granted" || result.state == "prompt") {
/* write to the clipboard now */
}
});
</pre>
<p>Ця функція приймає строку вводу та вносить ії в буфер обміну:</p>
<pre class="brush: js">function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* clipboard successfully set */
}, function() {
/* clipboard write failed */
});
}
</pre>
<h3 id="Browser-specific_considerations">Browser-specific considerations</h3>
<p>Буфер обміну та інші APIs активно розвиваются, тож існують варіанти серед веб-оглядачів як вони працюють.</p>
<p>В Chrome:</p>
<ul>
<li>Ви можете записувати в буфер обміну як інші операції з контекстом сторінки.</li>
<li>Вам не потрібні <code>"clipboardWrite"</code>, навіть поза функцією оброки дій користувача(event handler).</li>
</ul>
<p>В Firefox:</p>
<ul>
<li>Ви можете записувата в буфер з execCommand в усіх обробках контенту, <em>виключно в фонових сторінках</em>. В Firefox ви не можете виділяти текст чи ставити фокус на input в фонових сторінках, тож ви не можете записувати в буфер з execCommand у фонових сторінках. Clipboard Web API не має таких обмежень.</li>
<li>З версії 57 і вищче, ви можете копіювати зображення в буфер використовуючи <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData">clipboard.setImageData()</a></code> API.</li>
<li>Підтримка Clipboard API's {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}} було додано Firefox 63.</li>
<li>Із використанням скриптів сторінок, Clipboard API доступна лише з HTTPS сторінками. В іншому випадку, використовуйте messaging між вашим контент скриптом та фоновим скриптом.</li>
</ul>
<div class="blockIndicator note">
<p><code>execCommand('copy')</code> API не підтримує <strong>Safari</strong></p>
</div>
<h2 id="Зчитування_буферу_обміну">Зчитування буферу обміну</h2>
<p><code>execCommand()</code> дозволяє виконати <code>"paste"</code> команду, яка дозволяє вставити поточний контент в буфері обміну в область редагування. Ви можете отримати більшу гнучкість із Clipboard API's {{domxref("Clipboard.read()")}} та {{domxref("Clipboard.readText()")}} методами.</p>
<h3 id="Використання_execCommand()_2">Використання execCommand()</h3>
<p>По-перше, вам потрібен дозвіл <code>"clipboardRead"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> визначно до вашого додатку. Це обов'язвокі умови навіть якщо <code>"paste"</code> команда виконується в обробнику дій користувача такі як {{event("click")}} чи {{event("keypress")}}.</p>
<p>Наприклад HTML такий як:</p>
<pre class="brush: html"><textarea id="output"></textarea>
<button id="paste">Paste</button>
</pre>
<p>Щоб вставити контент в {{HTMLElement("textarea")}} з ID <code>"output"</code> з буферу обміну коли користувач нажме на кнопку <code>"paste"</code> {{HTMLElement("button")}}, використовуйте код:</p>
<pre class="brush: js">function paste() {
var pasteText = document.querySelector("#output");
pasteText.focus();
document.execCommand("paste");
console.log(pasteText.textContent);
}
document.querySelector("#paste").addEventListener("click", paste);</pre>
<h3 id="Використання_Clipboard_API_2">Використання Clipboard API</h3>
<p>Clipboard API's {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} та {{domxref("Clipboard.read", "navigator.clipboard.read()")}} методи дозволяють вам зчитувати текст чи бінарні данні з буферу обміну. Вона надає можливість зчитувати данні в буфері без вставки його в елемент редагування.</p>
<p>Щойно ви отримали <code>"clipboard-read"</code> дозвіл з <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>, ви можете зчитати данні дуже легко:</p>
<pre class="brush: js">navigator.clipboard.readText().then(clipText =>
document.getElementById("outbox").innerText = clipText);</pre>
<p>Цей код витягує текст з буферу та замінює контент елементу з ID <code>"outbox"</code>.</p>
<h3 id="Browser-specific_considerations_2">Browser-specific considerations</h3>
<p>Firefox підтримує <code>"clipboardRead"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> з версії 54, але личше підтримує вставку в елементи в <a href="/en-US/docs/Web/Guide/HTML/Editable_content">content editable mode</a>, які в контент скриптах лише працюють з {{HTMLElement("textarea")}}. Для фонових скриптів, будь який елемент може бути змінений в режим редагування контенту.</p>
<h2 id="Дивись_також">Дивись також</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li>
<li><a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a></li>
<li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li>
<li>{{htmlattrxref("contenteditable")}}</li>
</ul>
|
