Skip to content

Commit 6b19a13

Browse files
chrisdavidmillswbamberg
chrisdavidmills
and
wbamberg
authored
Editorial review: Add clipboardchange event page (mdn#43014)
* Add clipboardchange event page * Update files/en-us/web/api/clipboard/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * Update files/en-us/web/api/clipboard/clipboardchange_event/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> * Update files/en-us/web/api/clipboard/clipboardchange_event/index.md Co-authored-by: wbamberg <will@bootbonnet.ca> --------- Co-authored-by: wbamberg <will@bootbonnet.ca>
1 parent fca04c2 commit 6b19a13

File tree

3 files changed

+117
-0
lines changed

3 files changed

+117
-0
lines changed

‎files/en-us/web/api/clipboard/clipboardchange_event/index.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: "Clipboard: clipboardchange event"
3+
slug: Web/API/Clipboard/clipboardchange_event
4+
page-type: web-api-event
5+
browser-compat: api.Clipboard.clipboardchange_event
6+
---
7+
8+
{{APIRef("HTML DOM")}}
9+
10+
The **`clipboardchange`** event of the {{domxref("Clipboard")}} interface is fired when the system clipboard contents are changed in any way, for example via a system copy command, or via an API method such as {{domxref("Clipboard.writeText()")}}.
11+
12+
## Syntax
13+
14+
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
15+
16+
```js-nolint
17+
addEventListener("clipboardchange", (event) => { })
18+
19+
onclipboardchange = (event) => { }
20+
```
21+
22+
## Event type
23+
24+
A {{domxref("ClipboardChangeEvent")}}. Inherits from {{domxref("Event")}}.
25+
26+
{{InheritanceDiagram("ClipboardChangeEvent")}}
27+
28+
## Examples
29+
30+
### Listening for system copy commands
31+
32+
This example shows how to listen for system copy commands and display the content that was copied to the clipboard.
33+
34+
#### HTML
35+
36+
The HTML consists of three {{htmlelement("p")}} elements — one to display the clipboard contents and two containing sample text to copy.
37+
38+
```html live-sample___basic-usage
39+
<p id="output">Copied text:</p>
40+
41+
<p>
42+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a mattis purus.
43+
Donec at ipsum libero. Maecenas at dictum turpis. Vivamus eget aliquet augue.
44+
Aenean tempor dictum posuere. Vestibulum vehicula, nulla ac convallis feugiat,
45+
tortor velit lobortis est, vitae convallis velit libero vel urna. Suspendisse
46+
potenti. In bibendum ex et pellentesque gravida. Phasellus magna risus,
47+
euismod vitae sem in, viverra venenatis lacus. Sed dignissim risus eu congue
48+
consequat. Vestibulum nec feugiat libero. Maecenas quis sodales lorem, eu
49+
luctus nisl. Cras vel diam sed lacus finibus elementum sed sed nunc.
50+
</p>
51+
52+
<p>
53+
Nam ac metus eget est bibendum pulvinar. Nunc a venenatis lorem. Lorem ipsum
54+
dolor sit amet, consectetur adipiscing elit. In dignissim, arcu ornare luctus
55+
pharetra, dui velit faucibus leo, ac posuere ipsum risus vel ligula. Morbi
56+
varius, felis et ornare efficitur, tortor erat imperdiet lacus, non rhoncus
57+
lectus sapien sit amet augue. Suspendisse potenti. Sed fringilla mi augue, at
58+
laoreet felis varius in. Donec venenatis gravida lacus ut rutrum. Donec
59+
suscipit egestas justo. Proin semper nibh tortor, sit amet elementum metus
60+
placerat quis. Sed consectetur leo sed lorem varius, sit amet ultrices sem
61+
tincidunt. Vivamus facilisis at velit eget commodo.
62+
</p>
63+
```
64+
65+
```css hidden live-sample___basic-usage
66+
body {
67+
margin: 0 5px;
68+
}
69+
#output {
70+
font-family: Arial, Helvetica, sans-serif;
71+
padding: 10px;
72+
border: 2px solid #ccc;
73+
border-radius: 5px;
74+
}
75+
```
76+
77+
#### JavaScript
78+
79+
In our script, we first grab a reference to the output `<p>` element. We then define a `clipboardchange` event handler on the browser's {{domxref("Clipboard")}} object. When the event fires, we invoke the {{domxref("Clipboard.readText()")}} method to read the text that was just copied to the clipboard. When the result is returned, we set it as the value of the output paragraph's `textContent`.
80+
81+
```js live-sample___basic-usage
82+
const outputPara = document.querySelector("#output");
83+
84+
navigator.clipboard.addEventListener("clipboardchange", (event) => {
85+
navigator.clipboard
86+
.readText()
87+
.then((text) => (outputPara.textContent = `Copied text: ${text}`));
88+
});
89+
```
90+
91+
#### Result
92+
93+
The rendered example is as follows:
94+
95+
{{EmbedLiveSample("basic-usage", '100%', "350px", "", "", "", "clipboard-read")}}
96+
97+
Try selecting some text from the example and then copying it to the clipboard using <kbd>Ctrl</kbd> + <kbd>C</kbd> (or <kbd>Cmd</kbd> + <kbd>C</kbd> if you are using a Mac). On your first attempt, you will see a permission prompt asking you to allow permission to read the clipboard contents. After that (or immediately, on subsequent attempts), you should see the text that you copied printed to the output paragraph at the top of the UI.
98+
99+
## Specifications
100+
101+
{{Specifications}}
102+
103+
## Browser compatibility
104+
105+
{{Compat}}
106+
107+
## See also
108+
109+
- {{domxref("ClipboardChangeEvent")}}
110+
- [Clipboard API](/en-US/docs/Web/API/Clipboard_API)

‎files/en-us/web/api/clipboard/index.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ _`Clipboard` is based on the {{domxref("EventTarget")}} interface, and includes
3333
- {{domxref("Clipboard.writeText()","writeText()")}}
3434
- : Writes text to the system clipboard, returning a {{jsxref("Promise")}} that is resolved once the text is fully copied into the clipboard.
3535

36+
## Events
37+
38+
- {{domxref("Clipboard.clipboardchange_event","clipboardchange")}}
39+
- : Fired when the system clipboard contents are changed in any way, for example via a system copy command, or via an API method such as {{domxref("Clipboard.writeText()")}}.
40+
3641
## Specifications
3742

3843
{{Specifications}}

‎files/en-us/web/api/clipboard_api/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ Events are fired as the result of {{domxref("Element/cut_event", "cut")}}, {{dom
3030
The events have a default action, for example the `copy` action copies the current selection to the system clipboard by default.
3131
The default action can be overridden by the event handler — see each of the events for more information.
3232

33+
There is also a {{domxref("Clipboard.clipboardchange_event","clipboardchange")}} event fired directly on the {{domxref("Clipboard")}} object whenever the system clipboard's contents are changed. This is useful for notifying apps of a change to the system clipboard, for example if they have their own clipboard that needs to be kept in sync.
34+
3335
## Interfaces
3436

3537
- {{domxref("Clipboard")}} {{securecontext_inline}}

0 commit comments

Comments
 (0)