-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
89 lines (59 loc) · 2.52 KB
/
index.md
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
---
title: "Element: copy event"
short-title: copy
slug: Web/API/Element/copy_event
page-type: web-api-event
browser-compat: api.Element.copy_event
---
{{APIRef}}
The **`copy`** event of the [Clipboard API](/en-US/docs/Web/API/Clipboard_API) fires when the user initiates a copy action through the browser's user interface.
The event's default action is to copy the selection (if any) to the clipboard.
A handler for this event can _modify_ the clipboard contents by calling {{domxref("DataTransfer.setData", "setData(format, data)")}} on the event's {{domxref("ClipboardEvent.clipboardData")}} property, and cancelling the event's default action using {{domxref("Event/preventDefault", "event.preventDefault()")}}.
However, the handler cannot _read_ the clipboard data.
It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/Events/Creating_and_triggering_events) `copy` event, but this will not affect the system clipboard.
This event [bubbles](/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling), is [cancelable](/en-US/docs/Web/API/Event/cancelable) and is [composed](/en-US/docs/Web/API/Event/composed).
## Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("copy", (event) => {});
oncopy = (event) => {};
```
## Event type
A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}.
{{InheritanceDiagram("ClipboardEvent")}}
## Examples
### Live example
#### HTML
```html
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
```
```css hidden
div.source,
div.target {
border: 1px solid gray;
margin: 0.5rem;
padding: 0.5rem;
height: 1rem;
background-color: #e9eef1;
}
```
#### JavaScript
```js
const source = document.querySelector("div.source");
source.addEventListener("copy", (event) => {
const selection = document.getSelection();
event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
event.preventDefault();
});
```
#### Result
{{ EmbedLiveSample('Live_example', '100%', '120px') }}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- Related events: {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}}
- This event on {{domxref("Document")}} targets: {{domxref("Document/copy_event", "copy")}}
- This event on {{domxref("Window")}} targets: {{domxref("Window/copy_event", "copy")}}