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.
.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.
It's highly recommended that you visit the original post to play with the interactive demos.
If you found this series 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!
If you want more helpful content like this, feel free to follow me:
Top comments (0)