DEV Community

Cover image for Add a special message when users copy text
Phuoc Nguyen
Phuoc Nguyen

Posted on • Originally published at phuoc.ng

Add a special message when users copy text

Have you ever wanted to add a special message or attribution when users copy text from your website? For instance, when users select text and press Ctrl + C you might want to include the original website. That way, if users paste the content elsewhere, they'll see a message like this:

The original text

Copied from https://www.yourwebsite.com
Enter fullscreen mode Exit fullscreen mode

In this post, we'll learn how to achieve this specific behavior using JavaScript DOM. Typically, this behavior isn't applied to the entire page. Instead, it's used when users copy text from the main content section of the page. We'll assume that the markup has an element with the id of content.

<div id="content">
    ...
</div>
Enter fullscreen mode Exit fullscreen mode

Alright, let's dive in!

To select an element using JavaScript, we can use the getElementById method or any other method that fits your needs.

const contentEle = document.getElementById('content');
Enter fullscreen mode Exit fullscreen mode

Handling the copy event

Now it's time to handle the copy event, which occurs when the user copies the text.

contentEle.addEventListener('copy', (e) => {
    // We will add a custom message here ...
});
Enter fullscreen mode Exit fullscreen mode

Modifying the clipboard data

Within the event listener, we can modify the data that gets copied to the clipboard by using the ClipboardEvent.clipboardData property.

Unfortunately, the selected text cannot be obtained using the clipboardData.getData() function. It's only available when we handle the other events such as paste.

Fortunately, there's another way to get the selected text: by using the selection API. By calling window.getSelection().toString(), we can retrieve the exact text that the user has selected.

The copy event handler could look like this:

element.addEventListener('copy', (e) => {
    const clipboardData = e.clipboardData;
    const originalText = window.getSelection().toString();
    if (!originalText) {
        return;
    }

    // Modify the clipboard data
    e.preventDefault();
    clipboardData.setData('text/plain', originalText + '\n\n' + 'Copied from https://yourwebsite.com');
});
Enter fullscreen mode Exit fullscreen mode

In this example, we're adding a new line with a custom message Copied from https://yourwebsite.com to the original text being copied. Then, we set the updated copy back to the clipboard using the clipboardData.setData() function.

But, here's the important part: make sure to prevent the default behavior of the copy event. This will keep the original text from being copied to the clipboard without the custom message.

e.preventDefault();
Enter fullscreen mode Exit fullscreen mode

Apart from using clipboard APIs, there is another way to save text to the clipboard. Check out this post for more details.

Voila! With just a few lines of JavaScript DOM code, you can add a custom message to the text that users copy from your website.

Here's a live demonstration that you can play with! Check it out!

See also


It's highly recommended that you visit the original post to play with the interactive demos.

If you want more helpful content like this, feel free to follow me:

Top comments (0)