Last Updated - Thu Jan 17 2019

Cut Users love to copy and paste, well so do developers, but don't tell. The browser actually gives JavaScript access to the clipboard through the clipboardData object and also fires events for cut, copy and paste operations. This opens up opportunities for the AJAX developer to with these processes and manage the clipboard.

For these demonstrations I am going to work against the following HTML markup containing a TEXTAREA, DIV and buttons to manually initiate copying and pasting. The DIV is really a placeholder to display pasted text. The TEXTAREA will also be used to display pasted text, but it will also be used to copy and cut data to the clipboard.

<
textarea
id
="workArea"
cols
="50"
rows
="5"
name
="workArea"
></
textarea
>

<
div
id
="clipboardContents"
></
div
>

<
br
/>

<
button
id
="btnPaste"
>
Paste</
button
>

<
button
id
="bntCopy"
>
Copy</
button
>

Accessing clipboard information is done through the getData() function. And as you probably guessed you can add content to the clipboard using setData() function. You can also clear the clipboard by calling clearData().

Paste Data from the clipboard The getData() method has one parameter, dataFormat, which can be either Text or Url. While I realize the clipboard can contain more than just textual data, if you think about it you really should not deal with more than just text in the context of the browser. If you had access to binary data that could lead to a large security hazard. Another security feature is containing data access to the same security level. This means you cannot transfer data from HTTP to HTTPS or where different instances of the browser have differing security levels. Also dragging data from another clipboard enabled application to the browser is not allowed either, so no drag and drop from Word!

setData() also uses the dataFormat parameter and only allows Text and Url to be used. But is also has a Data parameter, which is how you pass text to the clipboard. clearData() uses an optional dataFormat parameter. If no dataFormat is specified all the data formats are cleared, otherwise the specified data format is cleared. Unlike getData and setData you can clear additional data formats: File, HTML and Image, which I have to admit is strange.

On to actually using these methods for something useful. First make sure you have some text in your clipboard, anything will do. I like to use sample giberish from Lipsum.com. Here I simply select some sample text and click the Paste button on the sample page. You will be prompted by the browser to allow access to the clipboard data.

Paste Data from the clipboard

The button click event handler sets the TEXTAREA's value and the DIV to the clipboard data as soon as you select 'Allow access'. If you choose 'Don't allow' then nothing will happen.

$("#btnPaste"
).click(function
 (e) {

 $("#workArea"
).val(clipboardData.getData("text"
));
 $("#clipboardContents"
).text(clipboardData.getData("text"
));

});

Pasted Data from the clipboard

The Copy button calls the setData method, supplying the contents of the TEXTAREA. You can verify this by pasting the contents to another application like notepad.

$("#bntCopy"
).click(function
 (e) {

 clipboardData.setData("text"
, $("#workArea"
).val());

});

You can also bind event handlers for both copy and paste events. However, they really should be called copying and pasting because the events fire just prior to the data being copied or pasted to and from the clipboard. jQuery makes it easy to bind event handlers using the $.bind(), $.live() and $.delegate() methods. Here I create event handlers using the $.bind method against the TEXTAREA.

$("#workArea"
).bind('paste'
, function
 () {
 alert('pasting: '
 + clipboardData.getData("text"
));
});

$("#workArea"
).bind('copy'
, function
 () {
 alert('copying: '
 + $(this
).val());
});

Now when the user presses Ctrl+V with focus in the TEXTAREA the paste event handler will execute, echoing the contents of the clipboard to an Alert dialog. I do not have to manually set the text here because that will naturally happen. Remember this event fires just before the clipboard data is pasted to the target field.

Similarly when the user selects some text in the TEXTAREA and presses CTRL+C (or goes through the long process of selecting the menu option for copy) the content being sent to the clipboard is echoed to an Alert and then supplied to the clipboard. You can then paste it in your target application.

So you see working against the clipboard using JavaScript is pretty easy. It is limited for security reasons, but nonetheless a nice way to pass text to and from the browser.

Become a Cut, Copy, Paste JavaScript Programmer