Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 28, 2021 06:39 am GMT

Click to Copy!

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
    • 2. 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  raw `index.html` endraw

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


Original Link: https://dev.to/sidmirza4/click-to-copy-81k

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To