Find the Material Key In the Clipboard

A user’s clipboard is a “capture all” in between the os and the apps utilized on it. When you utilize a web internet browser, you can highlight text or right-click an image and choose “Copy Image”. That made me consider how designers can find what remains in the clipboard.

You can recover the contents of the user’s clipboard utilizing the navigator.clipboard API. This API needs user consent as the clipboard might consist of delicate information. You can use the following JavaScript to get consent to utilize the clipboard API:

const outcome = wait for navigator.permissions.query( {name: "clipboard-write"} );.
if (result.state === "given"|| result.state === "timely") {
// Clipboard approvals offered.
}

With clipboard approvals given, you query the clipboard to get a ClipboardItem circumstances with information of what’s been copied:

const [item] = wait for navigator.clipboard.read();.

// When text is copied to clipboard ... item.types//["text/plain"]

// When an image is copied from a site ...
item.types// ["text/html", "image/png"]

As soon as you understand the contents and the MIME type, you can get the text in clipboard with readText():

const material = wait for navigator.clipboard.readText();.

When it comes to an image, if you have the MIME type and material offered, you can utilize << img > with an information URI for display screen. Understanding the contents of a user’s clipboard can be practical when providing precisely what they have actually copied!