“If there is a book you want to read but isn`t written yet, write it.” -Shel Silverstein

Clipboard Events

A brief overview of clipboard events used in JavaScript, including the copy, cut, and paste events.

Author: Kirstie Martinka (Kasten) | 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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clipboard Events in JavaScript</title>
    <style>
      body{
        margin: 15px;
      }

      input[type="text"]{
        display: block;
        margin-top: 15px;
        padding: 10px;
      }
    </style>
    <script>
      window.addEventListener("load", () => {

				// ENTER THE JS EVENTS HERE

      });
    </script>
  </head>
  <body>
    <h1>Clipboard Events in JavaScript</h1>
    <hr>
    <h2>Copy: oncopy</h2>
    <label>Type some text in the following box to practice the <b>oncopy</b> event:</label>
    <input type="text" name="oncopy">
    <p id="copyOutput"></p>
    <br>
    <h2>Cut: oncut</h2>
    <label>Type some text in the following box to practice the <b>oncut</b> event:</label>
    <input type="text" name="oncut">
    <p id="cutOutput"></p>
    <br>
    <h2>Paste: onpaste</h2>
    <label>Paste some text in the following box to practice the <b>onpaste</b> event:</label>
    <input type="text" name="onpaste">
    <p id="pasteOutput"></p>
  </body>
</html>

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:

const copyInput = document.querySelector("[name='oncopy']");
const copyOutput = document.querySelector("#copyOutput");

Then, add the following code:

copyInput.addEventListener("copy", (event) => {
	const copiedText = copyInput.value;
	event.clipboardData.setData("text/plain", copiedText);
	event.preventDefault();
	copyOutput.innerHTML = "<b>The following is copied to the clipboard: </b>" + 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:

const cutInput = document.querySelector("[name='oncut']");
const cutOutput = document.querySelector("#cutOutput");

Then, add the following code:

cutInput.addEventListener("cut", (event) => {
	const cutText = cutInput.value;
	event.clipboardData.setData("text/plain", cutText);
	cutOutput.innerHTML = "<b>The following is cut and copied to the clipboard: </b>" + 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:

let pasteInput = document.querySelector("[name='onpaste']");
const pasteOutput = document.querySelector("#pasteOutput");

Then, add the following code:

pasteInput.addEventListener("paste", (event) => {
	const pastedText = event.clipboardData.getData("text/plain")
	event.preventDefault();
	pasteInput.value = pastedText;
	pasteOutput.innerHTML = "<b>The following has been pasted into the text box: </b>" + 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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clipboard Events in JavaScript</title>
    <style>
      body{
        margin: 15px;
      }

      input[type="text"]{
        display: block;
        margin-top: 15px;
        padding: 10px;
      }
    </style>
    <script>
      window.addEventListener("load", () => {

        // oncopy Event
        const copyInput = document.querySelector("[name='oncopy']");
        const copyOutput = document.querySelector("#copyOutput");

        copyInput.addEventListener("copy", (event) => {
          const copiedText = copyInput.value;
          event.clipboardData.setData("text/plain", copiedText);
          event.preventDefault();
          copyOutput.innerHTML = "<b>The following is copied to the clipboard: </b>" + copiedText;
        });


        // oncut Event
        const cutInput = document.querySelector("[name='oncut']");
        const cutOutput = document.querySelector("#cutOutput");

        cutInput.addEventListener("cut", (event) => {
          const cutText = cutInput.value;
          event.clipboardData.setData("text/plain", cutText);
          cutOutput.innerHTML = "<b>The following is cut and copied to the clipboard: </b>" + cutText;
        });


        // onpaste Event
        let pasteInput = document.querySelector("[name='onpaste']");
        const pasteOutput = document.querySelector("#pasteOutput");

        pasteInput.addEventListener("paste", (event) => {
          const pastedText = event.clipboardData.getData("text/plain")
          event.preventDefault();
          pasteInput.value = pastedText;
          pasteOutput.innerHTML = "<b>The following has been pasted into the text box: </b>" + pastedText;
        });

      });
    </script>
  </head>
  <body>
    <h1>Clipboard Events in JavaScript</h1>
    <hr>
    <h2>Copy: oncopy</h2>
    <label>Type some text in the following box to practice the <b>oncopy</b> event:</label>
    <input type="text" name="oncopy">
    <p id="copyOutput"></p>
    <br>
    <h2>Cut: oncut</h2>
    <label>Type some text in the following box to practice the <b>oncut</b> event:</label>
    <input type="text" name="oncut">
    <p id="cutOutput"></p>
    <br>
    <h2>Paste: onpaste</h2>
    <label>Paste some text in the following box to practice the <b>onpaste</b> event:</label>
    <input type="text" name="onpaste">
    <p id="pasteOutput"></p>
  </body>
</html>
Return to the Beginning