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

You are here: Reference > JavaScript > client-side > browser > methods > clearData (clipboardData)

clearData method (clipboardData)

Browser support:

Removes the specified formatted data from the clipboard.

In Internet Explorer, use the getData method to retrieve and the setData method to set the contents of the clipboard.
In Firefox, Opera, Google Chrome and Safari, use the execCommand method with the 'Paste' command to retrieve and with the 'Copy' command to set the text content of the clipboard. Because of security restrictions, this method may not always work, see Example 2 for details.

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.

Syntax:

object.clearData ([dataFormat]);

You can find the related objects in the Supported by objects section below.

Parameters:

dataFormat

Optional. String that specifies the data format to clear. If this parameter is not specified, all data formats are cleared.

The following data formats are supported:

File

File format.

HTML

HTML format.

Image

Image format.

Text

Text format.

URL

URL format.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the clipboard in Internet Explorer:

<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:

<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>