HomeSoftware EngineeringDiscover Clipboard Operation in JavaScript | by Sabesan Sathananthan | Geek Tradition

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

Minimize, Copy and Paste in JavaScript

Picture by Alex Inexperienced from Pexels
  • Asynchronous Clipboard API
  • copy,minimize and paste Occasions

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.

  • Doc.execCommand('minimize') — minimize
  • Doc.execCommand('paste') — 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.

Paste operation

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


Though the 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;
The permission immediate for the Clipboard API.

Clipboard object


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.

  • 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

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.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments