Clipboard API is the next-generation clipboard operation technique, which is extra highly effective and affordable than the standard Doc.execCommand() technique. All its operations are asynchronous and return Promise objects with out inflicting web page jams. Furthermore, it may possibly put arbitrary content material (equivalent to footage) into the clipboard. The navigator.clipboard property returns the Clipboard object, and all operations are carried out by this object.
const clipboardObj = navigator.clipboard;
If the navigator.clipboard property returns undefined, it signifies that the present browser doesn’t assist this API (you possibly can see the complete compatibly desk on Can I take advantage of…). Since customers could put delicate information (equivalent to passwords) on the clipboard, permitting scripts to learn them arbitrarily will trigger safety dangers, so this API has extra safety restrictions. To begin with, the Chrome browser stipulates that solely HTTPS protocol pages can use this API. Nonetheless, the event setting (localhost) permits the usage of non-encrypted protocols. Secondly, the person’s permission must be clearly obtained when calling. The particular 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” have to be explicitly granted by the person. In different phrases, the script may 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 person agrees to learn.
As well as, it needs to be famous that what the script reads is at all times the clipboard of the present web page. One downside that this brings is that in the event you paste the related code into the developer device and run it instantly, an error could also be reported as a result of the present web page presently is the window of the developer device, not an online web page.
When you paste the above code into the developer device and run it, an error will probably 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 is determined by this web page. One resolution is to place the related code in setTimeout() to delay operating, and rapidly click on on the web page window of the browser earlier than calling the operate to show it into the present web page.
After the above code is pasted into the developer device to run, rapidly click on on the web page window of the webpage to make it the present web page, in order that no error will probably be reported.
Clipboard object
clipboard.readText()
The clipboard.readText() technique is used to repeat the textual content information within the clipboard.
Within the above instance, after the person clicks on the web page, the textual content within the clipboard will probably be output. Be aware that the browser will pop up a dialog field presently, asking the person whether or not to agree with the script to learn the clipboard.
If the person disagrees, the script will report an error. Right now, you should utilize the strive...catch construction to deal with errors.
clipboard.learn()
The clipboard.learn() technique is used to repeat the information within the clipboard, which may be textual content information or binary information (equivalent to footage). This technique requires specific permission from the person. This technique returns a Promise object. As soon as the state of the thing turns into resolved, an array may 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() technique. The clipboardItem.varieties property returns an array whose members are the MIME varieties out there for the clip merchandise. For instance, a clip merchandise may 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(kind) technique is used to learn the information of the clip merchandise and returns a Promise object. This technique accepts the MIME kind of the clip merchandise as a parameter and returns the information of that kind. This parameter is required, in any other case, an error will probably be reported.
clipboard.writeText()
The clipboard.writeText() technique is used to jot down textual content content material to the clipboard.
The above instance is that after the person clicks on the net web page, the script writes textual content information to the clipboard. This technique doesn’t require person permission, however it’s best to place it in strive...catch to stop errors.
clipboard.write()
The clipboard.write() technique is used to jot down arbitrary information to the clipboard, which may be textual content information or binary information. This technique accepts a ClipboardItem occasion as a parameter, which represents the information written to the clipboard.
Within the above instance, the script writes an image to the clipboard. Be aware that the Chrome browser at present (till this author writes this text) solely helps writing pictures in PNG format. clipboardItem() is a constructor natively supplied by the browser to generate an occasion of clipboardItem. It accepts an object as a parameter. The important thing title of the thing is the MIME kind of the information, and the important thing worth is the information itself. The next instance is to jot down the worth of the identical clip merchandise in a number of codecs to the clipboard, one is textual content information, and the opposite is binary information for pasting on totally different events.