Detect the Content Type in the Clipboard

By  on  

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!

Recent Features

  • By
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    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...

Incredible Demos

  • By
    The Simple Intro to SVG Animation

    This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...

  • By
    Comment Preview Using MooTools

    Comment previewing is an awesome addition to any blog. I've seen really simple comment previewing and some really complex comment previewing. The following is a tutorial on creating very basic comment previewing using MooTools. The XHTML You can set up your XHTML any way you'd like.

Discussion

  1. Hi David,

    Thank you for sharing this useful article on how to detect clipboard content using JavaScript. I learned a lot from your code examples and explanations. I especially liked how you used the Clipboard API to access different types of data, such as text, images, and files.

    I have a question though: how can I check if the clipboard contains data in a specific format, such as HTML or CSV? I know that in.NET Framework, there are methods like ContainsFormat and GetData that can do this[^1^][1], but I’m not sure how to do it in JavaScript. Do you have any suggestions or resources on this topic?

    Thanks again for your great work!

  2. I believe the permissions are clipboard-read, not clipboard-write.

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