Working with Clipboard APIs in HTML5 Web Apps

By Vipul Patel

Today’s web pages are so powerful with all the client-side processing that they are often referred to as web applications. Features which classically belonged to desktop applications now are expected of these “web applications”. One such feature is the cut/copy/paste which is used frequently.

The HTML5 specification provides rich support for such uses cases through the clipboard APIs.

The typical use cases which the clipboard APIs are targeted for include:

1. Rich content editing – Content containing elements of rich text.

2. Content containing graphic content such as SVG.

3. Content containing language semantics such as mathematical formula which can be lost by simple copy/paste operation

 

The HTML5 specification defines the following events as part of clipboard APIs.

1. Copy event – This is fired when the user initiates a copy operation. The default action for this event is to place the selected data in the clipboard. The event is cancelable. If no data is selected, the event is not fired and no data is copied to the clipboard.

2. Cut Event – This is fired when the user initiates a cut operation. The default action for this event is to place the selected data in the clipboard and removing it from the source location. The event is cancelable. If no data is selected, the event is not fired and no data is copied to the clipboard.

3. Paste event – This is fired when the user initiates a paste operation. The event is fired before the clipboard data is inserted. The event is cancelable.

4. Beforecopy event – This event, when fired, is used to guide the UI experience in case there are controls that users can use to initiate a copy operation. This event can be used to determine the state of the controls which can be used in a copy operation. If there is no content to copy, the default action is to disable any copy related UI controls.

5. Beforecut event – This event, when fired, is used to guide the UI experience in case there are controls that users can use to initiate a cut operation. This event can be used to determine the state of the controls which can be used in a cut operation. If there is no content to cut, the default action is to disable any cut related UI controls.

6. Beforepaste event – This event, when fired, is used to guide the UI experience in case there are controls that users can use to initiate a paste operation. This event can be used to determine the state of the controls which can be used in a paste operation. If there is no content to paste, the default action is to disable any paste related UI controls.

 

The Clipboard event inherit from the Event interface.

dictionary ClipboardEventInit : EventInit {
    DOMString data = "";
    DOMString dataType = "";
};

 

The copy event can be initiated as under.

 

var copyEvent = new ClipboardEvent('copy', { dataType: 'text/plain', data: 'Data to be copied' } );
document.dispatchEvent(copyEvent);

 

 

The paste event would appear as under.

var pasteEvent = new ClipboardEvent('paste', { dataType: 'text/plain', data: 'My string' } );
document.dispatchEvent(pasteEvent);

 

 

Summary

In this article, we learned the basics about the clipboard APIs and events specified in the HTML5 specification.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

 

Reference

http://www.w3.org/TR/clipboard-apis/



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •