How to Implement Copy to Clipboard on a Website
Tags: javascript, react, webdev, angular
Published: 2021-06-12 12:41:15

In this article, we are going to see how we can implement a copy to clipboard functionality on our website. On clicking the `Copy` button, the content/text of a paragraph tag should be copied to the clipboard which we can paste anywhere in our system.

Let's directly jump onto the code part.

I am assuming you have some basic knowledge of HTML, JavaScript and DOM manipulation.

### 👨‍💻 Code

We will write a very simple HTML code to display the paragraph content and a copy button.

`index.html`

```HTML
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Copy To Clipboard</title>
</head>

<body align="center">
	<p id="content">The text to be copied.</p>
	<button id="copy">Copy Text</button>
	<script src="./script.js"></script>
</body>

</html>
```

`script.js`

```javascript
// Reference of the paragraph tag
const content = document.getElementById("content");

// Reference of the copy button
const copyBtn = document.getElementById("copy");

// Copy button's onclick handler
copyBtn.onclick = copyToClipboard;

// Method responsible for copying the content
function copyToClipboard() {
	navigator.clipboard
		.writeText(content.innerText)
		.then(() => alert("Copied to clipboard"))
		.catch((e) => alert(e.message));
}
```

So first we are getting the reference of the `paragraph` tag and the `copy` button, then assigned the `onclick` handler to the `copy` button.

On clicking the `copy` button, the `copyToClipboard` method will get invoked.

#### Copy To Clipboard

Inside the `copyToClipboard` method we are using the Clipboard API.

> The Clipboard API can be used to implement cut, copy, and paste features within a web application.

- The system clipboard is exposed through the global `navigator.clipboard` property.

- The `writeText` method of the clipboard object expects a string value as an argument, which will be written to the clipboard.

- It returns a promise which is resolved once the clipboard's contents have been updated. The promise is rejected in case of any kind of error.

```javascript
...
navigator.clipboard
    .writeText(content.innerText)
    .then(() => alert("Copied to clipboard"))
    .catch((e) => alert(e.message));
...
```

So we are passing the `inner text` of the paragraph tag to the `writeText` method and if the promise is resolved i.e, the text has been copied.

### ✨ Bonus

Similarly, we can implement `cut` functionality.

After the text has been copied to the clipboard, just overwrite the inner text of the paragraph tag with an empty string.

```javascript
navigator.clipboard
	.writeText(content.innerText)
	.then(() => {
        // Overwriting with an empty string
		content.innerText = "";
		alert("Copied to clipboard");
	})
	.catch((e) => alert(e.message));
```

### 🔗 Demo

GitHub Repo: [Link](https://github.com/bibekkakati/blogs-projects/tree/main/web/clipboard-api)

Try It Out: [Link](https://bibekkakati.github.io/blogs-projects/web/clipboard-api/)

---

> Originally published on [blog.bibekkakati.me](https://blog.bibekkakati.me/how-to-implement-copy-to-clipboard-on-a-website)

---

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

[Twitter](https://twitter.com/kakatibibek) | [Instagram](https://instagram.com/bibekkakati) | [LinkedIn](https://linkedin.com/in/bibekkakati)


---

If you like my work and want to support it, you can do it here. I will really appreciate it.

<a href="https://www.buymeacoffee.com/bibekkakati" target="_blank">
<img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=bibekkakati&button_colour=FF5F5F&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00">
</a>