In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > browser > objects > clipboardData

clipboardData object

Browser support:

Allows access to the data placed on the system clipboard.

The clipboardData object is only supported by Internet Explorer.

In Firefox, Opera, Google Chrome and Safari, use the getData method with the 'Copy', 'Cut', 'Delete' and 'Paste' commands to access the clipboard. Example 2 demonstrates it.

Syntax:

Properties that reference the object:

•	window.clipboardData

Possible members:

Methods:

clearData

Removes the specified formatted data from the clipboard.

getData

Retrieves the specified formatted data from the clipboard.

setData

Specifies the data and its format for the clipboard.

Example HTML code 1:

This example illustrates the use of the clipboardData object:

<head>
    <script type="text/javascript">
        function CopyToClipboard () {
            var input = document.getElementById ("toClipboard");
            window.clipboardData.setData ("Text", input.value);
        }
        function ShowClipboardContent () {
            alert (window.clipboardData.getData ("Text"));
        }
        function ClearClipboard () {
            window.clipboardData.clearData ("Text");
        }
    </script>
</head>
<body>
    <input id="toClipboard" value="text to clipboard"/>
    <button onclick='CopyToClipboard ()'>Copy text to clipboard</button>
    <br /><br />
    <button onclick='ShowClipboardContent ();'>Show text data in clipboard</button>
    <button onclick='ClearClipboard ();'>Clear text data from clipboard</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements a cross-browser solution for copying text to the clipboard. Because of security restrictions, this method may not always work. One solution to avoid the security restrictions is to use Flash for clipboard operations. If you need more information on this, visit the Jeffothy’s Keyings - clipboard copy using flash page.

<head>
    <script type="text/javascript">
        function CopyToClipboard () {
            var input = document.getElementById ("toClipboard");
            var textToClipboard = input.value;
            
            var success = true;
            if (window.clipboardData) { // Internet Explorer
                window.clipboardData.setData ("Text", textToClipboard);
            }
            else {
                    // create a temporary element for the execCommand method
                var forExecElement = CreateElementForExecCommand (textToClipboard);

                        /* Select the contents of the element 
                            (the execCommand for 'copy' method works on the selection) */
                SelectContent (forExecElement);

                var supported = true;

                    // UniversalXPConnect privilege is required for clipboard access in Firefox
                try {
                    if (window.netscape && netscape.security) {
                        netscape.security.PrivilegeManager.enablePrivilege ("UniversalXPConnect");
                    }

                        // Copy the selected content to the clipboard
                        // Works in Firefox and in Safari before version 5
                    success = document.execCommand ("copy", false, null);
                }
                catch (e) {
                    success = false;
                }
                
                    // remove the temporary element
                document.body.removeChild (forExecElement);
            }

            if (success) {
                alert ("The text is on the clipboard, try to paste it!");
            }
            else {
                alert ("Your browser doesn't allow clipboard access!");
            }
        }

        function CreateElementForExecCommand (textToClipboard) {
            var forExecElement = document.createElement ("div");
                // place outside the visible area
            forExecElement.style.position = "absolute";
            forExecElement.style.left = "-10000px";
            forExecElement.style.top = "-10000px";
                // write the necessary text into the element and append to the document
            forExecElement.textContent = textToClipboard;
            document.body.appendChild (forExecElement);
                // the contentEditable mode is necessary for the  execCommand method in Firefox
            forExecElement.contentEditable = true;

            return forExecElement;
        }

        function SelectContent (element) {
                // first create a range
            var rangeToSelect = document.createRange ();
            rangeToSelect.selectNodeContents (element);

                // select the contents
            var selection = window.getSelection ();
            selection.removeAllRanges ();
            selection.addRange (rangeToSelect);
        }
    </script>
</head>
<body>
    <input id="toClipboard" value="text to clipboard"/>
    <button onclick='CopyToClipboard ()'>Copy text to clipboard</button>
</body>