Copy the content of an element to your clipboard
Tags: tutorial, webdev, javascript
Published: 2023-12-25 04:06:47

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()`.

```js
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:

```js
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:

```js
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:

```js
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:

```js
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.

{% codepen https://codepen.io/phuocng/pen/KKEwzov %}

---

It's highly recommended that you visit the [original post](https://phuoc.ng/collection/mirror-a-text-area/copy-the-content-of-an-element-to-your-clipboard/) to play with the interactive demos. 

If you found this series helpful, please consider giving the [repository](https://github.com/phuocng/mirror-a-text-area) 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:

-   [Twitter](https://twitter.com/_phuocng)
-   [GitHub](https://github.com/phuocng)