Lower, Copy and Paste in JavaScript
The browser permits JavaScript scripts to learn and write to the clipboard, and robotically copy or paste content material. Typically, scripts shouldn’t modify the person’s clipboard, in order to not meet the person’s expectations. Nonetheless, generally it may be handy to do that, such because the “one-click copy” operate, the person clicks a button, and the required content material is robotically entered into the clipboard. Presently, there are 3 ways to implement clipboard operations.
Doc.execCommand()technique- Asynchronous Clipboard API
copy,minimizeandpasteOccasions
This text introduces these three strategies one after the other. That is my thirty seventh Medium article.
Doc.execCommand() is the normal technique of manipulating the clipboard, which is supported by numerous browsers. It helps the three operations of copy, minimize, and paste.
Doc.execCommand('copy')— copyDoc.execCommand('minimize')— minimizeDoc.execCommand('paste')— paste
Copy or Lower 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. Observe that the copy operation is greatest positioned within the occasion listener operate, triggered by the person (for instance, the person clicks a button). If the script is executed autonomously, some browsers might report an error. Lower operation can be much like the copy operation.
Paste operation
When pasting, calling Doc.execCommand('paste') will output the contents of the clipboard to the present focus aspect.
Drawback
Though the Doc.execCommand() technique 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. In case you copy/paste a considerable amount of information, the web page will freeze. Some browsers will even pop up a immediate field and ask the person for permission. Right now, the web page will turn out to be unresponsive earlier than the person makes a selection. In an effort to remedy these issues, browser distributors have proposed an asynchronous Clipboard API.
Clipboard API is the next-generation clipboard operation technique, which is extra highly effective and cheap than the normal Doc.execCommand() technique. All its operations are asynchronous and return Promise objects with out inflicting web page jams. Furthermore, it could actually put arbitrary content material (resembling photos) into the clipboard. The navigator.clipboard property returns the Clipboard object, and all operations are carried out by means of this object.
const clipboardObj = navigator.clipboard;
If the navigator.clipboard property returns undefined, it implies that the present browser doesn’t assist this API (you possibly can see the complete compatibly desk on Can I exploit…). Since customers might put delicate information (resembling 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 robotically granted to the script, and the “learn permission” have to be explicitly granted by the person. In different phrases, the script might be robotically 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 at all times the clipboard of the present web page. One downside that this brings is that in case you paste the related code into the developer device and run it straight, an error could also be reported as a result of the present web page right now is the window of the developer device, not an online web page.
In case 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 answer 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 operate 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
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 might be output. Observe 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. Right now, you should utilize the attempt...catch construction to deal with errors.
clipboard.learn()
The clipboard.learn() technique is used to repeat the information within the clipboard, which might be textual content information or binary information (resembling photos). This technique requires express permission from the person. This technique returns a Promise object. As soon as the state of the article turns into resolved, an array might 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.sorts property and a clipboardItem.getType() technique. The clipboardItem.sorts property returns an array whose members are the MIME sorts accessible for the clip merchandise. For instance, a clip merchandise might be pasted in HTML format or in plain textual content format. Then it has two MIME sorts (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 might be reported.
clipboard.writeText()
The clipboard.writeText() technique is used to write down 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 technique doesn’t require person permission, however it’s best to place it in attempt...catch to stop errors.
clipboard.write()
The clipboard.write() technique is used to write down arbitrary information to the clipboard, which might 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. Observe 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 supplied by the browser to generate an occasion of clipboardItem. It accepts an object as a parameter. The important thing title of the article is the MIME kind of the information, and the important thing worth is the information itself. The next instance is to write 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.
When the person places information into the clipboard, the copy occasion might 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 comprises the clipboard information. It’s an object with the next properties and strategies.
Occasion.clipboardData.setData(kind, information): To change the clipboard information, you could specify the information kind.Occasion.clipboardData.getData(kind): To acquire clipboard information, you could specify the information kind.Occasion.clipboardData.clearData([type]): Clear clipboard information, you possibly can specify the information kind. If you don’t specify the kind, all kinds of information might be cleared.Occasion.clipboardData.objects: An array-like object comprises all clip objects, however normally there is just one clip merchandise
The next instance is to intercept the person’s copy operation and put the required 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 slicing operation. Its processing is strictly the identical because the copy occasion, and the minimize information can be obtained from the Occasion.clipboardData property.
When the person makes use of the clipboard information to stick, the paste occasion might be triggered. The next instance is to intercept the paste operation, the information within the clipboard is taken out by the script.
