Cross Brouser Support For onPaste clipboardData

Some of the current browsers support a 'clipboardData' property as part of a paste event. This should allow you to query the different data formats created from the current data on the clipboard.

Safari and Chrome have the best support, but it is still incomplete. Firefox has no support if you discount using the XPCOM objects interface. The IE interface is older and only supports Text or URL data.


Firefox, Safari IE and Chrome all sanitize any HTML being pasted. Opera will only paste plain text so HTML sanitation is not an issue. Some earlier version of IE could cause some security issues as they copy hyper-links in full.

Try copying and pasting this paragraph and link into the box below.

• Not supported in Firefox
• Supported in Chrome
• Supported in Safari
• Supported in IE
• Not supported in Opera

window.addEventListener('load', function (e) {

    var node = document.getElementById('edit-box');

    node.onpaste = function (e) {
        log('paste');
        if (e.clipboardData) {
            log('event.clipboardData');
            if (e.clipboardData.types) {
                log('event.clipboardData.types');

                // Look for a types property that is undefined
                if (!isArray(e.clipboardData.types)) {
                    log('event.clipboardData.types is undefined');
                }

                // Loop the data store in type and display it
                var i = 0;
                while (i < e.clipboardData.types.length) {
                    var key = e.clipboardData.types[i];
                    var val = e.clipboardData.getData(key);
                    log((i + 1) + ': ' + key + ' - ' + val);
                    i++;
                }

            } else {
                // Look for access to data if types array is missing 
                var text = e.clipboardData.getData('text/plain');
                var url = e.clipboardData.getData('text/uri-list');
                var html = e.clipboardData.getData('text/html');
                log('text/plain - ' + text);
                if (url !== undefined) {
                    log('text/uri-list - ' + url);
                }
                if (html !== undefined) {
                    log('text/html - ' + html);
                }
            }
        }

        // IE event is attached to the window object
        if (window.clipboardData) {
            log('window.clipboardData');
            // The schema is fixed
            var text = window.clipboardData.getData('Text');
            var url = window.clipboardData.getData('URL');
            log('Text - ' + text);
            if (url !== null) {
                log('URL - ' + url);
            }
        }

        // Needs a few msec to excute paste
        window.setTimeout(logContents, 50, true);

    };

    // Button events
   var btn = document.getElementById('clear-logs');
    btn.onclick = function (e) {
        clearLog();
    };
});


function logContents() {
    var node = document.getElementById('edit-box');
    log('Current contents - ' + node.innerHTML);
}

function log(str) {
    var node = document.getElementById('log-box');
    var li = document.createElement('li')
    li.appendChild(document.createTextNode(str));
    node.appendChild(li);
}

function clearLog() {
    var node = document.getElementById('log-box');
    while (node.firstChild) {
        node.removeChild(node.firstChild);
    }
}

function isArray(obj) {
    return obj && !(obj.propertyIsEnumerable('length')) && 
        typeof obj === 'object' && typeof obj.length === 'number';
};