---
title: Clipboard Events
author: Kirstie Martinka
description: A brief overview of clipboard events used in JavaScript, including the copy, cut, and paste events.
published: 2025-1-21
---
-----
## Clipboard Events in JavaScript
The following clipboard events in JavaScript will take place
once the user initiates the action through the browser's user interface:
1. **Copy** (oncopy)
2. **Cut** (oncut)
3. **Paste** (onpaste)
The following links are to articles that assisted me in research of the above clipboard events:
1. W3Schools: https://www.w3schools.com/jsref/obj_clipboardevent.asp
2. MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent
3. Geeks for Geeks: https://www.geeksforgeeks.org/html-dom-clipboardevent/
In VS Code, create a file named "clipboard-events.html", and copy/paste the following starter code to complete the following practice for clipboard events:
```html
Clipboard Events in JavaScript
Clipboard Events in JavaScript
Copy: oncopy
Cut: oncut
Paste: onpaste
```
We are going to keep the objective pretty simple:
For each of the events (copy, cut, paste), we are going to create a message that appears
below each text box that confirms the text has been successfully copied, cut, or pasted.
When following along with the instructions, insert all JavaScript code within the **window load handler** that is within the **script** tags of the HTML file.
**NOTE:** In the starter code, I have created three separate text boxes (using **input** tags)
located in the body of the web page that will represent each of the events we are learning.
Below each of the **input** tags, I have also included a **p** tag
(this will be where we want the confirmation message to appear if text was successfully copied, cut, or pasted).
-----
### Copy: oncopy
The **oncopy** event occurs when the user initiates the copy process in the browser -
this can mean when the user copies an element content (like a selection of text)
or when a user copies a whole element (like an image).
Two common ways to copy from a browser are as follows:
1. Ctrl + C
2. Right click to display the context menu > Select "Copy"
We will first want to get a handle on the **input** tag and **p** tag associated with the **oncopy** event:
```js
const copyInput = document.querySelector("[name='oncopy']");
const copyOutput = document.querySelector("#copyOutput");
```
Then, add the following code:
```js
copyInput.addEventListener("copy", (event) => {
const copiedText = copyInput.value;
event.clipboardData.setData("text/plain", copiedText);
event.preventDefault();
copyOutput.innerHTML = "The following is copied to the clipboard: " + copiedText;
});
```
We first hooked the **addEventListener** method to the **copyInput** text box that we previously got a handle on.
The first parameter is the event we are listening for (copy),
and the second parameter is a function, where we list what should happen when the copy event occurs.
Within the function, we first gave a name to the parameter, the current element, and in this case, we are using the name "event".
In the body of the function:
1. Created a variable **copiedText** and set it to the value entered into the **copyInput** text box.
2. For the event's clipboardData property - used the **setData()** method to set the copied input to
"text/plain" and to the **copiedText** defined just one line above.
1. **NOTE:** clipboardData is an object containing the data affected by the clipboard operation.
3. Used the **preventDefault()** method to prevent the event's default behavior.
4. Set the **copyOutput** inner HTML to state "The following is copied to the clipboard" followed by the **copiedText**.
1. This will help the user confirm that the text was successfully copied, and it will also give confirmation of exactly what text was copied.
**NOTE:** When using the **oncopy** event in the **.addEventListener** method,
the first parameter should be entered as "copy", with the "on" omitted from the event.
This will also apply when we are using the **oncut** and **onpaste** events.
-----
### Cut: oncut
The **oncut** event occurs when the user initiates the cut process in the browser -
this will most commonly occur in text boxes (**input** elements with type="text").
Two common ways to cut from a browser are as follows:
1. Ctrl + X
2. Right click to display the context menu > Select "Cut"
We will first want to get a handle on the **input** tag and **p** tag associated with the **oncut** event:
```js
const cutInput = document.querySelector("[name='oncut']");
const cutOutput = document.querySelector("#cutOutput");
```
Then, add the following code:
```js
cutInput.addEventListener("cut", (event) => {
const cutText = cutInput.value;
event.clipboardData.setData("text/plain", cutText);
cutOutput.innerHTML = "The following is cut and copied to the clipboard: " + cutText;
});
```
We first hooked the **addEventListener** method to the **cutInput** text box that we previously got a handle on.
The first parameter is the event we are listening for (cut),
and the second parameter is a function, where we list what should happen when the cut event occurs.
Within the function, we first gave a name to the parameter, the current element, and in this case, we are using the name "event".
In the body of the function:
1. Created a variable **cutText** and set it to the value entered into the **cutInput** text box.
2. For the event's clipboardData property - used the **setData()** method to set the copied input to
"text/plain" and to the **cutText** defined just one line above.
3. Set the **cutOutput** inner HTML to state "The following is cut and copied to the clipboard" followed by the **cutText**.
1. This will help the user confirm that the text was successfully cut, and it will also give confirmation of exactly what text was copied/cut.
**NOTE:** The **preventDefault()** method was not used within the body of the function, like it was used in the **oncopy** event.
The cut event's default action is to copy and remove the text from within the text box.
If we were to prevent the cut action's default, the text that was cut would still remain within the text box.
-----
### Paste: onpaste
The **onpaste** event occurs when the user initiates the paste process in the browser -
similar to the **oncut** event, this will most commonly occur in text boxes (**input** elements with type="text").
Two common ways to paste from a browser are as follows:
1. Ctrl + V
2. Right click to display the context menu > Select "Paste"
We will first want to get a handle on the **input** tag and **p** tag associated with the **onpaste** event:
```js
let pasteInput = document.querySelector("[name='onpaste']");
const pasteOutput = document.querySelector("#pasteOutput");
```
Then, add the following code:
```js
pasteInput.addEventListener("paste", (event) => {
const pastedText = event.clipboardData.getData("text/plain")
event.preventDefault();
pasteInput.value = pastedText;
pasteOutput.innerHTML = "The following has been pasted into the text box: " + pastedText;
});
```
We first hooked the **addEventListener** method to the **pasteInput** text box that we previously got a handle on.
The first parameter is the event we are listening for (paste),
and the second parameter is a function, where we list what should happen when the paste event occurs.
Within the function, we first gave a name to the parameter, the current element, and in this case, we are using the name "event".
In the body of the function:
1. Created a variable **pastedText** and set it to the event's clipboardData property - used the **getData()** method set with "text/plain".
1. This will set the variable **pastedText** to what data is currently copied to the clipboard.
2. Used the **preventDefault()** method to prevent the event's default behavior.
3. Set the **pastedInput** value to the **pastedText**.
1. This will paste the previously copied text into the **pasteInput** text box.
4. Set the **pasteOutput** inner HTML to state "The following has been pasted into the text box:" followed by the **pastedText**.
1. This will help the user confirm that the text was successfully pasted, and it will also give confirmation of exactly what text was pasted into the text box.
-----
If the code is entered correctly, you should be able to copy text, cut text, and paste text in each of the boxes
and receive the intended messages for each event. This could most likely be simplified in a number of ways,
but completing the code from above will allow you more practice and, hopefully, a deeper understanding of clipboard events!
See the completed code below:
```html
Clipboard Events in JavaScript
Clipboard Events in JavaScript
Copy: oncopy
Cut: oncut
Paste: onpaste
```
-----
##### [Return to the Beginning](#clipboard-events-in-javascript)
-----