Friday, March 25, 2022
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

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

Doc.execCommand() is the standard 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 aspect.


Though the Doc.execCommand() methodology is handy, it has some disadvantages. First, it may well 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. If you happen to copy/paste a considerable amount of information, the web page will freeze. Some browsers may also pop up a immediate field and ask the consumer for permission. Presently, the web page will develop into unresponsive earlier than the consumer makes a alternative. So as 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 cheap than the standard Doc.execCommand() methodology. All its operations are asynchronous and return Promise objects with out inflicting web page jams. Furthermore, it may well put arbitrary content material (corresponding to photos) into the clipboard. The navigator.clipboard property returns the Clipboard object, and all operations are carried out by way of this object.

const clipboardObj = navigator.clipboard;
The permission immediate for the Clipboard API.

Clipboard object


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

  • Occasion.clipboardData.getData(sort) : To acquire clipboard information, you should specify the information sort.
  • Occasion.clipboardData.clearData([type]) : Clear clipboard information, you may specify the information sort. If you don’t specify the sort, all varieties of information might be cleared.
  • Occasion.clipboardData.gadgets : An array-like object incorporates all clip gadgets, however often there is just one clip merchandise

For consumer expertise, Clipboard entry is a good instrument. However Clipboard entry has its thorns. Some customers deliver malicious information and a few customers carry delicate information. Be sure you deal with different consumer’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