Accessing the Clipboard from Javascript

Accessing the clipboard from JavaScript,
or how to implement copy and paste of a web page

I almost forgot about this feature until the other day when I was consolidating data records.  I scratched my head and said “gee, wouldn’t it be nice to just hit a copy button, navigate to another record and press the paste button and have all the text fields filled with the data.”  Then I remembered that I’ve used the system clipboard before.  So I dug around my code and came up with this little gem:

function CopyToClipboard()
{

    if (window.clipboardData && clipboardData.setData)
    {

        var laFields = Array(‘txtName’, ‘txtAddress1’, ‘txtCity’);
        var lsResult = ”;
        for (var i = 0; i < laFields.length; i++)
        {
            var lsFieldData = document.getElementById(laFields[i]).value;

            if (lsResult != ”)
                lsResult += ‘|’;

            lsResult += lsFieldData;
        }

        clipboardData.setData(“Text”, lsResult);
    }
}


function PasteFromClipboard()
{
    if (window.clipboardData && clipboardData.getData)
    {
        var lsData = clipboardData.getData(“Text”);
        lsData = lsData.replace(/(rn|n|r)/gm, “”);
        var laData = lsData.split(‘|’);

        if (laData.length > 0)
        {
            var laFields = Array(‘txtName’, ‘txtAddress1’, ‘txtCity’);

            for (var i = 0; i < laData.length; i++)
            {
                document.getElementById(laFields[i]).value = laData[i];
            }
        }
    }
}

The code here is obviously JavaScript.  The “CopyToClipboard()” function should be called by the onclick event of the copy button and the “PasteFromClipboard()” function should be called from the onclick event of the paste button.

This sample is looking for three fields (The actual routine copies a dozen fields, I cut them down for this sample).  The fields are named “txtName”, “txtAddress1” and “txtCity”.  You can also implement this by using a document.getElementsByName() call and iterate through all the input objects.  In my case, I simplified by specifying the id names of the input boxes I want to explicitly copy.

I used the pipe “|” symbol to separate values since there is the possibility that the data might contain commas or dashes.  Pipes are rarely used in text entry fields.

When you use this code you can click on the copy button and then open MS Word (or textpad) and paste into an empty sheet.  You’ll see your data separated by pipe symbols in one line of text.  You can edit this text and copy it back to the clipboard and then paste into your form.

There are some complications with various versions of browsers.  I noticed that this does not work for opera, firefox or chrome.  I’m still looking into the details of how to fix this problem, but for now I use this in IE (our customers are in-house people using IE 9).

For a more detailed discussion of accessing the clipboard from JavaScript, I would recommend this article:

Accessing the system clipboard with JavaScirpt – A Holy Grail?

 
 

0 thoughts on “Accessing the Clipboard from Javascript

Leave a Reply