Spot the Material Enter the Clipboard

A user’s clipboard is a “capture all” in between the os and the apps used 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 think of how designers can find what remains in the clipboard.

You can obtain the contents of the user’s clipboard utilizing the navigator.clipboard API. This API needs user authorization as the clipboard might include delicate information. You can utilize the following JavaScript to get authorization to utilize the clipboard API:

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

With clipboard approvals approved, 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"]

When 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 readily available, you can utilize << img > with an information URI for display screen. Understanding the contents of a user’s clipboard can be useful when providing precisely what they have actually copied!