Cut and copy to buffer using javascript

Starting with IE10, support for Copy and Cut commands has been added using the Document.execCommand () method. Also, these methods are available in Chrome since version 43.

Any text selected in the browser when executing one of these commands will be copied or cut into the user's clipboard. This allows the user to offer a simple method to select part of the text and copy to the clipboard.

This becomes extremely useful in combination with the program's text selection API to specify what to copy to the clipboard. Examples will be discussed in this article.

Examples

For example, let's add a button that copies the email address to the clipboard.
')
We will add an email address to our HTML, with a click on which will initiate the copying of email:

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p> <p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p> 

Then, in our JavaScript, we will add a click handler for the button, which will select the email from the contents of the js-emaillink link, execute the copy command, so that the email address is in the user's buffer and then remove the selection from the email, so that the user even will not see the selection.

 var copyEmailBtn = document.querySelector('.js-emailcopybtn'); copyEmailBtn.addEventListener('click', function(event) { //      var emailLink = document.querySelector('.js-emaillink'); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().addRange(range); try { // ,     ,    var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy email command was ' + msg); } catch(err) { console.log('Oops, unable to copy'); } //   - :    // removeRange(range)    window.getSelection().removeAllRanges(); }); 

This uses the selection API method, window.getSelection () , to programmatically select the text inside the link that we want to copy to the user's clipboard. After calling document.execCommand (), we can deselect using window.getSelection (). RemoveAllRanges () .
If you want to check that everything went well, then you can see the result returned by the function document.execCommand (). The result will be false if the feature is not supported or disabled. We “wrapped” execCommand () in a try ... catch, since commands "cut" and "copy" in some cases may return an error .

The cut command can be used for text input fields where you want to delete text and place this text in the buffer.

Use textarea and buttons:

 <p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p> <p><button class="js-textareacutbtn" disable>Cut Textarea</button></p> 

We can do the following to cut the content:

 var cutTextareaBtn = document.querySelector('.js-textareacutbtn'); cutTextareaBtn.addEventListener('click', function(event) { var cutTextarea = document.querySelector('.js-cuttextarea'); cutTextarea.select(); try { var successful = document.execCommand('cut'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Cutting text command was ' + msg); } catch(err) { console.log('Oops, unable to cut'); } }); 

queryCommandSupported and queryCommandEnabled

Before calling document.execCommand (), you must make sure that these APIs are supported using document.queryCommandSupported () . In the example above, we could block the button, according to the results of the compatibility check, for example, like this:

 copyEmailBtn.disabled = !document.queryCommandSupported('copy'); 

The difference between queryCommandSupported () and queryCommandEnabled () is that the "copy" and "cut" commands can be supported by the browser, but if the text is not selected, they will not be available. This is convenient if you did not select a text fragment programmatically and want the command to work as expected, otherwise show the message to the user.

Browser Compatibility

IE 10+, Chrome 43+, and Opera 29+

Firefox supports these functions, but requires changing the settings (see here ) ( Translator’s note : quite a while ago. There was even a clipboard function that was locked by default for security reasons). Without this, Firefox will return an error.

Safari does not support these commands.

Known Issues

• Calling queryCommandSupported () to check the availability of the "copy" and "paste" commands always returns false ( Translator's Note : Chrome / Chromium specifics. But, for example, SeaMonkey 2.33.1 always answers true), even after user interaction. This will not allow you to block interface elements for browsers that do not support these commands.
• Calling queryCommandSupported () from the developer console always returns false.
• Currently, text cutting is available only if the text has been selected programmatically .