Discover Clipboard Operation in JavaScript | by Sabesan Sathananthan | Geek Tradition


Clipboard API is the next-generation clipboard operation methodology, which is extra highly effective and cheap than the normal Doc.execCommand() methodology. All its operations are asynchronous and return Promise objects with out inflicting web page jams. Furthermore, it could possibly put arbitrary content material (similar to footage) into the clipboard. The navigator.clipboard property returns the Clipboard object, and all operations are carried out by way of this object.

const clipboardObj = navigator.clipboard;

If the navigator.clipboard property returns undefined, it implies that the present browser doesn’t help this API (you may see the total compatibly desk on Can I exploit…). Since customers could put delicate knowledge (similar to passwords) on the clipboard, permitting scripts to learn them arbitrarily will trigger safety dangers, so this API has extra safety restrictions. To start with, the Chrome browser stipulates that solely HTTPS protocol pages can use this API. Nevertheless, the event atmosphere (localhost) permits the usage of non-encrypted protocols. Secondly, the consumer’s permission must be clearly obtained when calling. The precise implementation of permissions makes use of the Permissions API. There are two permissions associated to the clipboard: clipboard-write (write permission) and clipboard-read (learn permission). The “write permission” is routinely granted to the script, and the “learn permission” should be explicitly granted by the consumer. In different phrases, the script could be routinely accomplished when writing to the clipboard, however when studying the clipboard, the browser will pop up a dialog field asking whether or not the consumer agrees to learn.

The permission immediate for the Clipboard API.

As well as, it must be famous that what the script reads is all the time the clipboard of the present web page. One drawback that this brings is that should you paste the related code into the developer device and run it immediately, an error could also be reported as a result of the present web page presently is the window of the developer device, not an internet web page.

When you paste the above code into the developer device and run it, an error might be reported. As a result of when the code is operating, the developer device window is the present web page, and there’s no DOM interface that the Clipboard API relies on this web page. One resolution is to place the related code in setTimeout() to delay operating, and shortly click on on the web page window of the browser earlier than calling the perform to show it into the present web page.

After the above code is pasted into the developer device to run, shortly click on on the web page window of the webpage to make it the present web page, in order that no error might be reported.

Clipboard object


The clipboard.readText() methodology is used to repeat the textual content knowledge within the clipboard.

Within the above instance, after the consumer clicks on the web page, the textual content within the clipboard might be output. Word that the browser will pop up a dialog field presently, asking the consumer whether or not to agree with the script to learn the clipboard.

If the consumer disagrees, the script will report an error. At the moment, you should use the attempt...catch construction to deal with errors.


The clipboard.learn() methodology is used to repeat the info within the clipboard, which could be textual content knowledge or binary knowledge (similar to footage). This methodology requires express permission from the consumer. This methodology returns a Promise object. As soon as the state of the article turns into resolved, an array could be obtained, and every array member is an occasion of a ClipboardItem object.

The ClipboardItem object represents a single clip merchandise and every clip merchandise has a clipboardItem.varieties property and a clipboardItem.getType() methodology. The clipboardItem.varieties property returns an array whose members are the MIME varieties obtainable for the clip merchandise. For instance, a clip merchandise could be pasted in HTML format or in plain textual content format. Then it has two MIME varieties (textual content/html and textual content/plain). The clipboardItem.getType(sort) methodology is used to learn the info of the clip merchandise and returns a Promise object. This methodology accepts the MIME sort of the clip merchandise as a parameter and returns the info of that sort. This parameter is required, in any other case, an error might be reported.


The clipboard.writeText() methodology is used to put in writing textual content content material to the clipboard.

The above instance is that after the consumer clicks on the internet web page, the script writes textual content knowledge to the clipboard. This methodology doesn’t require consumer permission, however it’s best to place it in attempt...catch to forestall errors.


The clipboard.write() methodology is used to put in writing arbitrary knowledge to the clipboard, which could be textual content knowledge or binary knowledge. This methodology accepts a ClipboardItem occasion as a parameter, which represents the info written to the clipboard.

Within the above instance, the script writes an image to the clipboard. Word that the Chrome browser at the moment (till this author writes this text) solely helps writing photographs in PNG format. clipboardItem() is a constructor natively offered by the browser to generate an occasion of clipboardItem. It accepts an object as a parameter. The important thing identify of the article is the MIME sort of the info, and the important thing worth is the info itself. The next instance is to put in writing the worth of the identical clip merchandise in a number of codecs to the clipboard, one is textual content knowledge, and the opposite is binary knowledge for pasting on completely different events.