How to implement copy and paste in a web application

Ever wondered how to implement copy and paste functionality in any of your web applications?
yes , I have
It is pretty much easier than it sounds , we only have to access the navigator.clipboard object to perform this.

1 copy

navigator.clipboard.writeText(e.target.value);

And that's all you need to copy whatsoever to the browsers clipboard

2 paste

This is almost same as the previous
navigator.clipboard.readText().then((text)=>console.log(text))
and there you have it , what you copied in your browsers console.

Easy peazy!!!

Comments

[blackr1234]

Both writeText and readText methods are returning Promise objects. Could you post full code that is able to print the copied text in console log?

[Hillary Chibuko]

peerreynders posted an awesome content about this issue ,I advice you reference it below

[peerreynders]

setTimeout(() => {
  navigator.clipboard.readText().then((clipText) => console.log(clipText));
}, 5000);

or

setTimeout(async () => {
  const clipText = await navigator.clipboard.readText();
  console.log(clipText);
}, 5000);

Copy either of the snippets into the Chrome DevTools console panel and run it. Then you have 5 seconds to select and copy something before it appears in the console when the timeout expires.

MDN: Clipboard.readText() - Example

[Hillary Chibuko]

yea this is awesome content...
The navigator.clipboard.readText returns a promise ....
so listening for a promise and pasting into the console after five seconds is great , because by then the promise most have resolved...
Kudos!!!