Select Page

Detect the Content Type in the Clipboard

David Walsh
Published: March 6, 2023

A user’s clipboard is a “catch all” between the operating system and the apps employed on it. When you use a web browser, you can highlight text or right-click an image and select “Copy Image”. That made me think about how developers can detect what is in the clipboard.

You can retrieve the contents of the user’s clipboard using the navigator.clipboard API. This API requires user permission as the clipboard could contain sensitive data. You can employ the following JavaScript to get permission to use the clipboard API:

const result = await navigator.permissions.query({name: "clipboard-write"});
if (result.state === "granted" || result.state === "prompt") {
  // Clipboard permissions available
}

With clipboard permissions granted, you query the clipboard to get a ClipboardItem instance with details of what’s been copied:

const [item] = await navigator.clipboard.read();
// When text is copied to clipboard....
item.types // ["text/plain"]
// When an image is copied from a website...
item.types // ["text/html", "image/png"]

Once you know the contents and the MIME type, you can get the text in clipboard with readText():

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

In the case of an image, if you have the MIME type and content available, you can use <img> with a data URI for display. Knowing the contents of a user’s clipboard can be helpful when presenting exactly what they’ve copied!

  • Designing for Simplicity

    Before we get started, it’s worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech…

  • 39 Shirts &#8211; 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…

  • PHP / MooTools 1.2 Accordion Helper

    The MooTools Accordion plugin seems to be the plugin that people seem to have the most problems with. It’s an awesome plugin, so I can see why so many people want to use it, but I think that may be part of the problem.

  • JavaScript Canvas Image Conversion

    At last week’s Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one…



Source: davidwalsh.name