navigator.clipboard API

By  on  

Reading from and writing to the user's clipboard can be both a very useful and dangerous capability. Used correctly and it's a huge convenience to the user; used dubiously and the user could suffer catastrophic consequences. Imagine a wrong account number or wallet address being copied -- yikes! This is why programmatic copy and pasting needs to be protected, and why the JavaScript Clipboard API requires explicit user permission to allow a website to use it.

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

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

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

await navigator.clipboard.writeText('');

The API is obviously very easy to use -- each method returns a Promise so you can use async/await or then callbacks. The difficult part is striking the balance of when to use each. Unnecessary reads will feel invasive, and unnecessary writes will significantly dissolve user trust.

When may you want to write to the clipboard? Possibly after the user pastes a seed phrase, password, or credit card number into likewise named form fields.

Sure you can use the numerous libraries available to simulate this API, but know that an official API does exist. And as always, I'm teaching you how to use it -- it's up to you to ensure it's the right time and tool for the job!

Recent Features

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!