Mohd Shahid
Shahid's Blog

Shahid's Blog

Click to Copy!

Click to Copy!

Messing around with user's clipboard using JS.

Mohd Shahid's photo
Mohd Shahid
ยทAug 28, 2021ยท

3 min read

Hey Guys ๐Ÿ‘‹

Ever wondered how some websites have "click to copy" functionality?

  • You can also do just that, whether you're building an e-commerce website where you want user to click on share button to write the url of the product on their website.
  • or you are building some website/documentation where people can click somewhere and copy the code snippet.

In this article I will explain how you can mess around with the user's clipboard ๐Ÿ˜„.

Let's get started ๐Ÿš€

To explain this better, I will create a demo project. You can follow along if you want to.

  • Make a folder and name it whatever you like.
  • In that folder make two files
      1. index.html
      1. app.js

Add the following HTML code in index.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>
    <style></style>
  </head>
  <body>
    <h2>Implementing copy to clipboard with a simple click ๐Ÿ“‹</h2>
    <button>Click to copy</button>
    <script src="./app.js"></script>
  </body>
</html>
  • Now select h2 and button element in app.js:
    const h2 = document.querySelector('h2');
    const button = document.querySelector('button');
    

Preview the index.html in your browser.

Side note: This demo will not work in IE

It should look something like this ๐Ÿ‘‡ preview of `index.html`


Now to alter the user's clipboard we have to use Clipboard API.
The clipboard object is exposed by the navigator.clipboard property.

Add the following code in the app.js file:

const cb = navigator.clipboard;
  • console.log(cb) will look something like this ๐Ÿ‘‡

Preview of clipboard

๐Ÿ‘‰ Remember: Clipboard API is asnychronous, means every method will return a promise which will resolve or reject. To consume the promise we can either use async/await syntax or .then/.catch.


Reading text from clipboard ๐Ÿ“‹

  • To read the text from clipboard I will add a click event listener to the button:
  • In the event listener I will call a method called readText(), which is available on the cb object we accessed earlier:
    button.addEventListener('click', async () => {
    const text = await cb.readText();
    console.log(text);
      // output will be whatever you last copied, 
      // or empty string if the
      // copied data is not of type text.
    });
    
  • To read the text from clipboard user must grant read permission, otherwise the operation will fail. ๐Ÿ‘‡
    clipboard_permissrion
  • If permission is denied ๐Ÿ‘‡ permission_denied

You check if the user granted the permission or not using the Permission API.


Writing text to clipboard ๐Ÿ“‹

  • To write the text to user's clipboard we use writeText() method available on the cb object.
  • Writing permission is given automatically by the browser.

Write the following the code in the app.js:

button.addEventListener('click', async () => {
  // const text = await cb.readText();
  // console.log(text);

  // writing the inner text of the h2 element
  // to the user's clipboard.  
    cb.writeText(h2.innerText).then(() => {
        console.log('text written to clipboard')
    })
});

That's it for this article guys.

See, how easy it is you mess with the user's clipboard ๐Ÿ˜‚.

Thanks โค๏ธ for giving it a read, I hope you found it useful.

For concise tips and tricks, please follow me on Twitter

Happy Coding ๐Ÿ’š

ย 
Share this