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



f3b8 Reduce, Copy and Paste in f3b8 JavaScript

f3b8 Picture by f3b8 Alex Inexperienced f3b8 from f3b8 Pexels

f3b8 The browser permits JavaScript scripts f3b8 to learn and write to f3b8 the clipboard, and robotically copy f3b8 or paste content material. Usually, f3b8 scripts shouldn’t modify the consumer’s f3b8 clipboard, in order to not f3b8 meet the consumer’s expectations. Nevertheless, f3b8 typically it may be handy f3b8 to do that, such because f3b8 the “one-click copy” operate, the f3b8 consumer clicks a button, and f3b8 the required content material is f3b8 robotically entered into the clipboard. f3b8 At the moment, there are f3b8 3 ways to implement clipboard f3b8 operations.

  • f3b8 Doc.execCommand() f3b8 methodology
  • f3b8 Asynchronous Clipboard API
  • f3b8 copy f3b8 , f3b8 reduce f3b8 and f3b8 paste f3b8 Occasions

f3b8 This text introduces these three f3b8 strategies one after the other. f3b8 That is my thirty seventh f3b8 Medium article.

f3b8 Doc.execCommand() f3b8 is the standard methodology f3b8 of manipulating the clipboard, which f3b8 is supported by numerous browsers. f3b8 It helps the three operations f3b8 of copy, reduce, and paste.

  • f3b8 Doc.execCommand('copy') f3b8 — copy
  • f3b8 Doc.execCommand('reduce') f3b8 — reduce
  • f3b8 Doc.execCommand('paste') f3b8 — paste

f3b8 Copy or Reduce operation

f3b8 When copying, first choose the f3b8 textual content after which name f3b8 the f3b8 Doc.execCommand('copy') f3b8 , the chosen textual content f3b8 will enter the clipboard.

f3b8 Within the above instance, the f3b8 script first selects the textual f3b8 content within the f3b8 inputElement f3b8 of the enter field f3b8 ( f3b8 inputElement.choose() f3b8 ), after which f3b8 Doc.execCommand('copy') f3b8 copies it to the f3b8 clipboard. Observe that the copy f3b8 operation is greatest positioned within f3b8 the occasion listener operate, triggered f3b8 by the consumer (for instance, f3b8 the consumer clicks a button). f3b8 If the script is executed f3b8 autonomously, some browsers could report f3b8 an error. Reduce operation can f3b8 be just like the copy f3b8 operation.

f3b8 Paste operation

f3b8 When pasting, calling f3b8 Doc.execCommand('paste') f3b8 will output the contents f3b8 of the clipboard to the f3b8 present focus aspect.

f3b8 Drawback

f3b8 Though the f3b8 Doc.execCommand() f3b8 methodology is handy, it f3b8 has some disadvantages. First, it f3b8 may solely copy the chosen f3b8 content material to the clipboard, f3b8 and can’t write content material f3b8 to the clipboard arbitrarily. Secondly, f3b8 it’s an asynchronous operation. In f3b8 the event you copy/paste a f3b8 considerable amount of information, the f3b8 web page will freeze. Some f3b8 browsers may also pop up f3b8 a immediate field and ask f3b8 the consumer for permission. Presently, f3b8 the web page will turn f3b8 out to be unresponsive earlier f3b8 than the consumer makes a f3b8 alternative. In an effort to f3b8 resolve these issues, browser distributors f3b8 have proposed an asynchronous Clipboard f3b8 API.

f3b8 Clipboard API is the next-generation f3b8 clipboard operation methodology, which is f3b8 extra highly effective and affordable f3b8 than the standard f3b8 Doc.execCommand() f3b8 methodology. All its operations f3b8 are asynchronous and return Promise f3b8 objects with out inflicting web f3b8 page jams. Furthermore, it may f3b8 put arbitrary content material (akin f3b8 to footage) into the clipboard. f3b8 The f3b8 navigator.clipboard f3b8 property returns the Clipboard f3b8 object, and all operations are f3b8 carried out via this object.

 f3b8 const clipboardObj = navigator.clipboard;

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

f3b8 The permission immediate for the f3b8 Clipboard API.

f3b8 As well as, it needs f3b8 to be famous that what f3b8 the script reads is at f3b8 all times the clipboard of f3b8 the present web page. One f3b8 downside that this brings is f3b8 that if you happen to f3b8 paste the related code into f3b8 the developer device and run f3b8 it immediately, an error could f3b8 also be reported as a f3b8 result of the present web f3b8 page at the moment is f3b8 the window of the developer f3b8 device, not an online web f3b8 page.

f3b8 In the event you paste f3b8 the above code into the f3b8 developer device and run it, f3b8 an error will likely be f3b8 reported. As a result of f3b8 when the code is working, f3b8 the developer device window is f3b8 the present web page, and f3b8 there’s no DOM interface that f3b8 the Clipboard API is dependent f3b8 upon this web page. One f3b8 resolution is to place the f3b8 related code in setTimeout() to f3b8 delay working, and rapidly click f3b8 on on the web page f3b8 window of the browser earlier f3b8 than calling the operate to f3b8 show it into the present f3b8 web page.

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

f3b8 Clipboard object

f3b8 clipboard.readText()

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

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

f3b8 If the consumer disagrees, the f3b8 script will report an error. f3b8 Presently, you should utilize the f3b8 f3b8 attempt...catch f3b8 construction to deal with f3b8 errors.

f3b8 clipboard.learn()

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

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

f3b8 clipboard.writeText()

f3b8 The f3b8 clipboard.writeText() f3b8 methodology is used to f3b8 write down textual content content f3b8 material to the clipboard.

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

f3b8 clipboard.write()

f3b8 The f3b8 clipboard.write() f3b8 methodology is used to f3b8 write down arbitrary information to f3b8 the clipboard, which may be f3b8 textual content information or binary f3b8 information. This methodology accepts a f3b8 ClipboardItem occasion as a parameter, f3b8 which represents the info written f3b8 to the clipboard.

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

f3b8 When the consumer places information f3b8 into the clipboard, the f3b8 copy f3b8 occasion will likely be f3b8 triggered. The next instance is f3b8 to transform the textual content f3b8 that the consumer places on f3b8 the clipboard to uppercase.

f3b8 Within the above instance, the f3b8 f3b8 clipboardData f3b8 property of the occasion f3b8 object incorporates the clipboard information. f3b8 It’s an object with the f3b8 next properties and strategies.

  • f3b8 Occasion.clipboardData.setData(sort, information) f3b8 : To switch the f3b8 clipboard information, you must specify f3b8 the info sort.
  • f3b8 Occasion.clipboardData.getData(sort) f3b8 : To acquire clipboard f3b8 information, you must specify the f3b8 info sort.
  • f3b8 Occasion.clipboardData.clearData([type]) f3b8 : Clear clipboard information, f3b8 you may specify the info f3b8 sort. If you don’t specify f3b8 the kind, all varieties of f3b8 information will likely be cleared.
  • f3b8 Occasion.clipboardData.objects f3b8 : An array-like object f3b8 incorporates all clip objects, however f3b8 normally there is just one f3b8 clip merchandise

f3b8 The next instance is to f3b8 intercept the consumer’s copy operation f3b8 and put the required content f3b8 material into the clipboard.

f3b8 Within the above instance, first, f3b8 use f3b8 e.preventDefault() f3b8 to cancel the default f3b8 operation of the clipboard, after f3b8 which the script takes over f3b8 the copy operation. The f3b8 reduce f3b8 occasion is triggered when f3b8 the consumer performs a slicing f3b8 operation. Its processing is precisely f3b8 the identical because the f3b8 copy f3b8 occasion, and the reduce f3b8 information can be obtained from f3b8 the f3b8 Occasion.clipboardData f3b8 property.

f3b8 When the consumer makes use f3b8 of the clipboard information to f3b8 stick, the f3b8 paste f3b8 occasion will likely be f3b8 triggered. The next instance is f3b8 to intercept the paste operation, f3b8 the info within the clipboard f3b8 is taken out by the f3b8 script.



Please enter your comment!
Please enter your name here