JavaScript's copy and paste events fire when a user copies text from a site or when that user seeks to paste content into a field. Together, these two rarely used events allow web developers to make web forms and site content more secure.
In ecommerce site design, there are two strong use cases for controlling or moderating what a shopper can paste into a field or copy from the site. The most obvious of these is the checkout form, particularly, the credit card number entry field.
Imagine that a user has entered a credit card number into the checkout field and for some reason leaves the computer for a moment, thinking that all will be fine because the characters in the credit card number of visually obscured.
If a perpetrator did somehow manage to copy that field, the copy event would allow you to at least notify the shopper that the credit card number had been copied.
Likewise, in order to ensure that a customer has properly typed an email address, you may ask them to reenter that address, but for this form of validation to work, you'll need to prevent the user from simply copying one field's content into another. For that, the paste event could serve.
The oncopy Event
The JavaScript oncopy event can be applied on forms and text in most modern browsers, including Mozilla Firefox, Google Chrome, Apple Safari, and Microsoft Internet Explorer (IE). Chrome and Safari also allow oncopy events for the document object.
This event is invoked when a user presses CTRL + C on the keyboard, uses an edit menu to select copy, or alternate clicks to get a context menu and selects copy.
In all of the browsers mentioned above, oncopy bubbles and is cancelable, making it possible to employ event delegation and—to some extent—prevent users from copying text. Although IE and the standards-compliant browsers address event listening differently in JavaScript, all of these web browsers will support implementing oncopy as follows.
object.oncopy = notifier;
function notifier(e)
{
Do something…
}
In most browsers, cancelling the oncopy event will prevent the target selection from being copied, which is handy if you want to prevent users from copying product descriptions or similar. In Safari, cancelling the event will clear the clipboard, erasing whatever the user had stored there.
IE's Special Case
Often the oncopy event is used in conjunction with preventing a user from copying something from a page. In most browsers, this is done by cancelling the event as mentioned above. Otherwise, browsers do not generally allow scripts to have access to the user's clipboard for security reasons. But IE is an exception. In this browser, it is possible to erase the user's clipboard, read data that is already on the clipboard, or even modify the text the user has selected to copy to the clipboard.
While this IE feature does raise some security concerns, it makes it easy to add copyright information or URLs to selected copy.
Specifically, imagine a case where a competitor copied the product description for an item that both your company or client and the competitor sell. If the copying was done in IE, your JavaScript could insert copyright information and a link into the middle of the selection. If the competitor didn't read the copy, that competitor would have unwittingly added your link to her page.
The onpaste Event
Like oncopy, the onpaste event is available in IE, Safari, Chrome, and Firefox. It bubbles for event delegation, and it is cancelable. This event is invoked when a user presses CTRL + P or selects paste from any menu.
As described above in the email address example, the onpaste event is an excellent way to prevent users from copying data from one form field or from an external document into a form field on the site you're developing. Simply cancel the event, and nothing can be pasted into the field.
object.onpaste = preventer;
function preventer(e)
{
Do something…
}
Summing Up
JavaScript's little known copy and paste events can be very helpful for ecommerce-related forms or to protect proprietary site content.
