javascript - How to paste on click? It works in google docs

Question

I want to be able to initiate real paste event when user clicks. I can understand this may be a security issue, because if any webpage had access to users clipboard, that would be bad. So I thought all browsers disallow accessing clipboard data.

But for example in google docs (in the word-like application), I can Paste from custom context menu (right mouse click on a html element pretending to be a context menu), even if the clipboard data has been copied to clipboard in different application like Microsoft Paint. This works in Google Chrome browser, which is the browser of my interest.

I thought they do it using flash, but it still works even if I completely disable flash in chrome. There was a question about this already, but the answer mentioned there is not correct. Another answer of that question suggests that google is using a chrome extension for this, but it still works even if I disable all extensions in chrome.

How to reproduce in windows:

• disable flash in chrome, disable all extensions
• restart
• go to google docs and open new empty writing document (Docs, not spreadsheet)
• run microsoft paint application in windows
• draw something in microsoft paint, press Ctrl+A to select all, Ctrl+C to copy
• switch back to chrome to the docs empty page, and rightclick the empty page
• select Paste from the artificial context menu (notice the context menu is not the native menu from windows, but it comes from the html webpage of google docs)
• you will see that the clipboard image was pasted to the docs document (!)
• how do they do this?

I know how to access the clipboard data if user presses Ctrl+V on my webpage, because this triggers Paste event on the current window. But, how do I either access the clipboard data or initiate the paste of actual clipboard data (eg. a bitmap copied in mspaint) in javascript (or using jquery) while user just clicks a button or div?

Answer 1

I want to be able to initiate real paste event when user clicks. I can understand this may be a security issue, because ...

The above is the bottom line..

Having this code JS Fiddle

var Copy =  document.getElementById('copy'),
    Cut =  document.getElementById('cut'),
    Paste =  document.getElementById('paste');

// Checking Clipboard API without an action from the user
console.log('Copy:' + document.queryCommandSupported('copy'));
console.log('Cut:' + document.queryCommandSupported('cut'));
console.log('Paste:' + document.queryCommandSupported('paste'));


//Now checking the clipboard API upon a user action
Copy.addEventListener('click', function(){
    console.log('Copy:' + document.queryCommandSupported('copy'));
});

Cut.addEventListener('click', function(){
    console.log('Cut:' + document.queryCommandSupported('cut'));
});

Paste.addEventListener('click', function(){
    console.log('Paste:' + document.queryCommandSupported('paste'));
});

<button id="copy">Copy</button>
<button id="cut">Cut</button>
<button id="paste">Pate</button>