JavaScript Clipboard Events (Copy Cut and Paste)

There is less used feature of JavaScript is to interact with the clipboard of the client computer. Here is intended to provide a demonstration of how to copy, cut and paste from and to the system clipboard with javascript.

Event Event Type Specification Description Applies
copy ClipboardEvent Clipboard The text selection has been added to the clipboard. Most elementss such as window, document etc.
cut ClipboardEvent Clipboard The text selection has been removed from the document and added to the clipboard. Editable elements such as TEXTAREA, INPUT etc.
paste ClipboardEvent Clipboard Data has been transfered from the system clipboard to the document. Editable elements such as TEXTAREA, INPUT etc.

Clipboard Events can be listened by addEventListener or oncopy|oncut|onpaste.

Syntax:

Example:

Notes: For the event handlers are defined as HTML attributes, events will fire when the selection data is cut and added to the system’s clipboard. Returning false prevents this data from being cut. The following disables any text within a TEXTAREA from being cut (copy is still OK)

All of these events fire whether the user uses the cmd+v/ctrl+v types of keyboard shortcuts or if they select edit/paste from their menu.


Resource: