- Asynchronous Clipboard API
This text introduces these three strategies one after the other. That is my thirty seventh Medium article.
Doc.execCommand() is the normal methodology of manipulating the clipboard, which is supported by varied browsers. It helps the three operations of copy, minimize, and paste.
Copy or Minimize operation
When copying, first choose the textual content after which name the
Doc.execCommand('copy'), the chosen textual content will enter the clipboard.
Within the above instance, the script first selects the textual content within the
inputElement of the enter field (
inputElement.choose() ), after which
Doc.execCommand('copy') copies it to the clipboard. Notice that the copy operation is greatest positioned within the occasion listener perform, triggered by the person (for instance, the person clicks a button). If the script is executed autonomously, some browsers might report an error. Minimize operation can also be much like the copy operation.
When pasting, calling
Doc.execCommand('paste') will output the contents of the clipboard to the present focus ingredient.
Doc.execCommand() methodology is handy, it has some disadvantages. First, it could actually solely copy the chosen content material to the clipboard, and can’t write content material to the clipboard arbitrarily. Secondly, it’s an asynchronous operation. Should you copy/paste a considerable amount of information, the web page will freeze. Some browsers may also pop up a immediate field and ask the person for permission. At the moment, the web page will grow to be unresponsive earlier than the person makes a selection. With the intention to clear up these issues, browser distributors have proposed an asynchronous Clipboard API.
Clipboard API is the next-generation clipboard operation methodology, which is extra highly effective and affordable than the normal
Doc.execCommand() methodology. All its operations are asynchronous and return Promise objects with out inflicting web page jams. Furthermore, it could actually put arbitrary content material (reminiscent of photos) into the clipboard. The
navigator.clipboard property returns the Clipboard object, and all operations are carried out via this object.
const clipboardObj = navigator.clipboard;
navigator.clipboard property returns
undefined, it implies that the present browser doesn’t help this API (you’ll be able to see the complete compatibly desk on Can I take advantage of…). Since customers might put delicate information (reminiscent of 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 setting (
localhost) permits using non-encrypted protocols. Secondly, the person’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 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 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 for those who paste the related code into the developer instrument and run it instantly, an error could also be reported as a result of the present web page right now is the window of the developer instrument, not an internet web page.
Should you paste the above code into the developer instrument and run it, an error will probably be reported. As a result of when the code is operating, the developer instrument window is the present web page, and there’s no DOM interface that the Clipboard API depends upon this web page. One answer 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 perform to show it into the present web page.
After the above code is pasted into the developer instrument 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.readText() methodology 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. Notice that the browser will pop up a dialog field right now, 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. At the moment, you should utilize the
attempt...catch construction to deal with errors.
clipboard.learn() methodology is used to repeat the info within the clipboard, which may be textual content information or binary information (reminiscent of photos). This methodology requires specific permission from the person. This methodology returns a Promise object. As soon as the state of the item 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() methodology. The
clipboardItem.varieties property returns an array whose members are the MIME varieties obtainable 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(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 will probably be reported.
clipboard.writeText() methodology is used to put in writing textual content content material to the clipboard.
The above instance is that after the person clicks on the internet web page, the script writes textual content information to the clipboard. This methodology doesn’t require person permission, however it’s best to place it in
attempt...catch to stop errors.
clipboard.write() methodology is used to put in writing arbitrary information to the clipboard, which may be textual content information or binary information. 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. Notice 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 item 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 information, and the opposite is binary information for pasting on completely different events.
When the person places information into the clipboard, the
copy occasion will probably be triggered. The next instance is to transform the textual content that the person places on the clipboard to uppercase.
Within the above instance, the
clipboardData property of the occasion object incorporates the clipboard information. It’s an object with the next properties and strategies.
Occasion.clipboardData.setData(sort, information): To change the clipboard information, you should specify the info sort.
Occasion.clipboardData.getData(sort): To acquire clipboard information, you should specify the info sort.
Occasion.clipboardData.clearData([type]): Clear clipboard information, you’ll be able to specify the info sort. If you don’t specify the kind, all sorts of information will probably be cleared.
Occasion.clipboardData.objects: An array-like object incorporates all clip objects, however often there is just one clip merchandise
The next instance is to intercept the person’s copy operation and put the desired content material into the clipboard.
Within the above instance, first, use
e.preventDefault() to cancel the default operation of the clipboard, after which the script takes over the copy operation. The
minimize occasion is triggered when the person performs a reducing operation. Its processing is strictly the identical because the
copy occasion, and the minimize information can also be obtained from the
When the person makes use of the clipboard information to stick, the
paste occasion will probably be triggered. The next instance is to intercept the paste operation, the info within the clipboard is taken out by the script.
For person expertise, Clipboard entry is a superb instrument. However Clipboard entry has its thorns. Some customers convey malicious information and a few customers carry delicate information. Be sure to deal with different person’s information responsibly. It is advisable to put together your self for these nasty paste occasions.
Asynchronous Clipboard API is new, and no browser helps all options, nevertheless it’s simpler to make use of and extra strong than the outdated