Skip to content

Commit 7545820

Browse files
rorajaroraja
authored
Clipboardchange event explainer document (#850)
Create clipboardchange event explainer
1 parent 193f1c0 commit 7545820

File tree

6 files changed

+334
-0
lines changed

6 files changed

+334
-0
lines changed

‎ClipboardAPI/clipboard-change-event-example-app.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Clipboard Format Checker</title>
8+
<script>
9+
const isClipboardChangeEventAvailable = true;
10+
11+
async function checkClipboard() {
12+
try {
13+
console.log("Clipboard changed!");
14+
const clipboardItems = await navigator.clipboard.read();
15+
let formats = {};
16+
17+
for (const item of clipboardItems) {
18+
if (item.types.includes('text/plain')) {
19+
const textBlob = await item.getType('text/plain');
20+
const text = await textBlob.text();
21+
document.getElementById('clipboardText').innerText = text;
22+
formats.text = true;
23+
}
24+
else {
25+
document.getElementById('clipboardText').innerText = "N/A";
26+
}
27+
if (item.types.includes('image/png') || item.types.includes('image/jpeg')) {
28+
const imgBlob = await item.getType(item.types.find(type => type.startsWith('image/')));
29+
const imgUrl = URL.createObjectURL(imgBlob);
30+
document.getElementById('clipboardImg').innerHTML = `<img src="${imgUrl}" alt="Clipboard Image" width="150">`;
31+
formats.img = true;
32+
}
33+
else {
34+
document.getElementById('clipboardImg').innerText = "N/A";
35+
}
36+
if (item.types.includes('text/html')) {
37+
const htmlBlob = await item.getType('text/html');
38+
const html = await htmlBlob.text();
39+
document.getElementById('clipboardHtml').innerText = html;
40+
formats.html = true;
41+
}
42+
else {
43+
document.getElementById('clipboardHtml').innerText = "N/A";
44+
}
45+
}
46+
47+
document.getElementById('pasteText').disabled = !formats.text;
48+
document.getElementById('pasteImg').disabled = !formats.img;
49+
document.getElementById('pasteHtml').disabled = !formats.html;
50+
} catch (err) {
51+
console.error('Failed to read clipboard contents: ', err);
52+
}
53+
}
54+
55+
56+
if (isClipboardChangeEventAvailable) {
57+
58+
// Try to read the clipboard to trigger a permissions prompt if required.
59+
navigator.clipboard.readText().then(() => {
60+
61+
console.log("Clipboard read permission granted");
62+
63+
// Invoke the on clipboardchange handler on page load to initialize current UI state
64+
checkClipboard();
65+
66+
// Start listening to the clipboardchange event
67+
navigator.clipboard.addEventListener("clipboardchange", checkClipboard);
68+
});
69+
70+
}
71+
else {
72+
// Invoke the on clipboardchange handler on page load to initialize current UI state
73+
checkClipboard();
74+
// Since clipboardchange event is not available, fallback to polling
75+
setInterval(checkClipboard, 2000);
76+
}
77+
</script>
78+
</head>
79+
80+
<body>
81+
<h1>Clipboardchange event demo app - Paste formats viewer</h1>
82+
<p>
83+
This HTML application demonstrates the use of the clipboardchange event to monitor
84+
and display clipboard data in various formats. The app listens for changes to the
85+
clipboard using the clipboardchange event. It then displays the clipboard data in a table
86+
with columns for Text, Image, and HTML formats.
87+
<br />
88+
When the clipboard content changes, the app updates the table to show the current clipboard data.
89+
The app includes buttons for pasting clipboard data as Text, Image, and HTML.
90+
These buttons are initially disabled and are enabled based on the available clipboard formats.
91+
92+
</p>
93+
<hr />
94+
<button id="pasteText" disabled>Paste as Text</button>
95+
<button id="pasteImg" disabled>Paste as Image</button>
96+
<button id="pasteHtml" disabled>Paste as HTML</button>
97+
<br />
98+
<hr />
99+
<table border="1">
100+
<thead>
101+
<tr>
102+
<th>Text</th>
103+
<th>Image</th>
104+
<th>HTML</th>
105+
</tr>
106+
</thead>
107+
<tbody>
108+
<tr>
109+
<td id="clipboardText">N/A</td>
110+
<td id="clipboardImg">N/A</td>
111+
<td id="clipboardHtml">N/A</td>
112+
</tr>
113+
</tbody>
114+
</table>
115+
</body>
116+
117+
</html>

0 commit comments

Comments
 (0)