copy

16 March, 2023

Contributors

Milsaware

@milsaware

About

The copy event is a DOM event that is fired when the user initiates a copy operation, either by using the browser's built-in copy functionality (such as the Ctrl+C or Cmd+C keyboard shortcut), or by using a custom copy command in your application.

When the copy event is fired, you can use JavaScript to access the text that is being copied to the clipboard, modify it if necessary, or perform any other action that you want to take in response to the copy operation.

Event listener

Here's an example of how to use the copy event to modify the text that is being copied:

HTML

<textarea id="myTextarea">This is some text that will be copied.</textarea>

JavaScript

const myTextarea = document.getElementById("myTextarea");

myTextarea.addEventListener("copy", function(event) {
    // Get the selected text
    let selectedText = window.getSelection().toString();

    // Modify the selected text
    let modifiedText = "Modified: " + selectedText;

    // Put the modified text on the clipboard
    event.clipboardData.setData("text/plain", modifiedText);

    // Prevent the default copy behavior
    event.preventDefault();
});

Here, we've added an event listener to the copy event of a <textarea> element with an id of "myTextarea". When the user initiates a copy operation on the text in the textarea, the event listener is triggered.

Inside the event listener, we use the window.getSelection() method to get the currently selected text in the textarea, and then modify it by adding the text "Modified: " to the beginning of the selected text.

We then use the event.clipboardData.setData() method to put the modified text on the clipboard, and prevent the default copy behaviour using the event.preventDefault() method.

Note that the copy event is not available in all browsers, and its behaviour may vary depending on the browser and operating system being used.

Property

Here's an example of using the oncopy property to attach an event handler function to a textarea element:

const textareaElement = document.querySelector('#myTextarea');

textareaElement.oncopy = function(event) {
    // Prevent the default copy behavior
    event.preventDefault();

    // Perform some action when the user copies content to the clipboard
    console.log('Content copied to clipboard');
};

Here, the oncopy property is used to assign an anonymous function as the event handler for the copy event of the textareaElement. The function first prevents the default copy behaviour by calling event.preventDefault(), and then logs a message to the console.

Inline

You can also use the copy event inline in HTML using the oncopy attribute. Here's an example:

<textarea id="myTextarea" oncopy="alert('Text copied!')">This is some text that will be copied.</textarea>

Here, we've added the oncopy attribute to the <textarea> element, which sets the alert() function to be called when the user initiates a copy operation on the text in the textarea. When the user triggers the copy event, the alert() function is called, which displays a simple message box with the text "Text copied!".

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

There is also a programmatic way to copy text to the clipboard using the execCommand() method with the "copy" command. This method is available on DOM elements and can be used to programmatically copy text to the clipboard, without requiring the user to initiate a copy operation.

Here's an example:

HTML

<input type="text" id="myInput" value="Copy me!" />

<button onclick="copyToClipboard()">Copy</button>

JavaScript

function copyToClipboard() {
    const myInput = document.getElementById("myInput");

    // Select the text in the input
    myInput.select();

    // Copy the selected text to the clipboard
    document.execCommand("copy");

    // Deselect the text
    window.getSelection().removeAllRanges();
}

Here, we have an input element with an id of "myInput", and a button that calls the copyToClipboard() function when clicked. Inside the function, we first get a reference to the input element using document.getElementById(). We then use the select() method to select the text inside the input element.

Next, we use the document.execCommand("copy") method to copy the selected text to the clipboard. This method takes a command as its argument, in this case, "copy", which indicates that we want to copy the selected text.

Finally, we use the removeAllRanges() method of the window.getSelection() object to deselect the text, so that it's no longer highlighted.

Note that the execCommand() method is not available in all browsers, and its behaviour may vary depending on the browser and operating system being used. It's generally better to use the copy event and allow the user to initiate copy operations, rather than relying on programmatic triggers.

javascript