navigator.clipboard API

Reading from and writing to the user’s clipboard can be both a very useful and dangerous feature. Used properly and it is a great convenience for the user; used questionably and the user suffers catastrophic consequences. Imagine that an incorrect account number or wallet address is copied – yikes! This is why programmatic copying and pasting need to be protected and why the JavaScript Clipboard API requires explicit user permission to allow a site to use it.

To read to the user’s clipboard, use readText method:

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

To write to the user’s clipboard, use writeText method:

await navigator.clipboard.writeText('');

The API is of course very easy to use – each method returns a promise so you can use it async/await or then recall. The hard part is finding the balance between when to use each. Unnecessary readings will feel invasive, and unnecessary writings will significantly dissolve user trust.

When might you want to write to the clipboard? Possibly after the user has entered a seed phrase, password or credit card number in form fields with the same name.

Of course, you can use the many libraries available to simulate this API, but know that there is an official API. And as always, I teach you how to use it – it’s up to you to make sure it’s the right time and tool for the job!

Monitoring the performance of the website
Monitoring the performance of the website
Monitoring the performance of the website
  • CSS gradients

    CSS gradients

    With CSS border radius, I showed you how CSS can bridge design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari and Chrome …

  • I'm a cheater

    I’m a cheater

    This is the hardest thing I’ve ever had to write, much less admit to myself. I have written resignation letters from jobs, I have loved, I have ended relationships, I have failed a wide range of tasks and failed myself in my life. All those feelings were very …

  • Scrolling “Accept the Terms” Component with MooTools ScrollSpy
  • jQuery topLink Plugin

    jQuery topLink Plugin

    Last week, I released a snippet of code for MooTools that allowed you to fade in and out with a “to the top” link on any page. Here’s how to implement this functionality using jQuery. XHTML A simple link. CSS A small CSS for position and style. jQuery …


Leave a Reply

Your email address will not be published.