navigator.clipboard API

Studying from and writing to the person’s clipboard could be each a really helpful and harmful functionality. Used appropriately and it is an enormous comfort to the person; used dubiously and the person may undergo catastrophic penalties. Think about a improper account quantity or pockets tackle being copied — yikes! For this reason programmatic copy and pasting must be protected, and why the JavaScript Clipboard API requires specific person permission to permit an internet site to make use of it.

To learn to the person’s clipboard, you utilize the readText technique:

const clipboardData = await navigator.clipboard.readText();

To put in writing to the person’s clipboard, you utilize the writeText technique:

await navigator.clipboard.writeText('');

The API is clearly very straightforward to make use of — every technique returns a Promise so you need to use async/await or then callbacks. The tough half is placing the steadiness of when to make use of every. Pointless reads will really feel invasive, and pointless writes will considerably dissolve person belief.

When might you need to write to the clipboard? Probably after the person pastes a seed phrase, password, or bank card quantity into likewise named type fields.

Positive you need to use the quite a few libraries obtainable to simulate this API, however know that an official API does exist. And as all the time, I am instructing you easy methods to use it — it is as much as you to make sure it is the fitting time and gear for the job!