Copy the content of an element to your clipboard

Written byPhuoc Nguyen

Created

01 Oct, 2023

At times, we want our users to be able to copy the content of a specific element on our webpage to their clipboard. This is especially useful when we have complex data, such as tables or forms, that cannot be easily copied by the user. Let's say you have a table on your webpage with data that users might want to copy and paste into a spreadsheet.

However, a mirrored textarea can make this process much easier. By using this technique, users can copy the table with just one click.

To use this technique, you'll need to create a mirrored textarea that is hidden from the user. Then, you can copy the content of the table to the textarea and trigger the copy command on that textarea. In this post, we'll show you how to accomplish this functionality.

#Create the mirrored textarea

To copy the content of the target element, we first need to create a hidden textarea element. We can do this by creating a class in our stylesheet and setting its `left` and `top` properties to `-9999px`. This will position the textarea off-screen and make it invisible to users.

css

.mirrored-textarea {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

Next, let's create a new textarea element by using `document.createElement()`. We'll then add the class created earlier to this newly created element using `.classList.add()`. Finally, we'll add this textarea element to the body of our web page by using `document.body.appendChild()`.

const mirroredTextarea = document.createElement('textarea');
mirroredTextarea.classList.add('mirrored-textarea');
document.body.appendChild(mirroredTextarea);

Our mirrored textarea is now ready for action.

#Copying content to the mirrored text area

To copy content to a mirrored text area, we first need to retrieve the content from the element we want to copy. Let's say we want to copy the content of a `div` element with an `id` of `target`. We can retrieve the content using JavaScript like this:

const targetElement = document.getElementById('target');
const elementContent = targetElement.innerHTML;

Once we have the content, we can easily copy it to the mirrored text area we created earlier by setting its `value` property:

mirroredTextarea.value = elementContent;

#Copying the content to the clipboard

Now that we've mirrored the content we want to copy, it's time to trigger the copy command. This is easily done by selecting the mirrored textarea and calling the `select()` and `copy()` methods on it:

mirroredTextarea.select();
document.execCommand('copy');

Once the content has been successfully copied to the clipboard, you can safely remove the mirrored textarea from the page:

mirroredTextarea.remove();

That's it! Your users can now easily copy the content of your target element. Give it a try yourself by clicking the Copy button in the demo below.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Show a toolbar after selecting text in a text area←

Build a simple code editor→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn