Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Way to copy to clipboard in the PURE javascript?

There is a way how to trick "copy to clipboard" functionality on web pages with flash...

But is there a way to make it in a PURE javascript way (but still cross-modern-browser)?

Beacause even adobe dropped its attention to flash while focusing more on html5...

like image 887
jave.web Avatar asked Apr 30 '13 07:04

jave.web


2 Answers

For security reasons most browsers do not allow to modify the clipboard (except IE).

The only way to make a copy-to-clipboard function cross-browser compatible is to use Flash.

For now you can select all the data you want to copy, and ask user to click CTRL+C.

like image 44
Zaheer Ahmed Avatar answered Sep 29 '22 08:09

Zaheer Ahmed


There is currently no way to do that cross-browser (often disabled for security reasons). In older browsers there is no such functionality (security issues) or often must be turned on manually... But in older browsers there is a high possibility of doing this using Flash...

UPDATE 2016
Still not mobile-cross-browser, but supported in newset desktop versions of major browsers...
Mozilla developer docs have now a little better description of Document.execCommand() and specifically the "copy" command:

Copies the current selection to the clipboard. Conditions of having this behavior enabled vary from one browser to another, and have evolved over time. Check the compatibility table to determine if you can use it in your case.

UPDATE 2016-08: Copy/cut adopted by all of the current major desktop browsers!

UPDATE 2021 => change to Clipboard API

document.execCommand() was marked as obsolete, but,
it should be superseded by Clipboard API
If you, for some reason, need to support IE9+, you will need to implement both in the future.

Clipboard API's MDN:

This API is designed to supersede accessing the clipboard using document.execCommand().

Note that it is still in development and has some implementation details - see the MDN link for more info in compatibility table

Example from MDN's Clipboard.writeText():

navigator.clipboard.writeText("<empty clipboard>").then(function() {
  /* clipboard successfully set */
}, function() {
  /* clipboard write failed */
});

Compatibility table from MDN: as of 2021-04-30 enter image description here

Quote about "the Firefox way"

There is a possibility that this will be done the same way in other browsers in the future:

Before Firefox 41, clipboard capability needed to be enabled in the user.js preference file. See A brief guide to Mozilla preferences for more information. If the command wasn't supported or enabled, execCommand was raising an exception instead of returning false.
In Firefox 41 and later, clipboard capability are enabled by default in any event handler that is able to pop-up a window (semi-trusted scripts).

This means, it is highly possible that any browser supporting copy/cut will do that only on user action. E.g.: Calling copy command on the fly won't work, however if bound to a click event, it works, even when the event is not prevented (e.g. navigation) (Chrome tested).

And here is some interesting article from Google, describing also the Selection API: https://developers.google.com/web/updates/2015/04/cut-and-copy-commands

BTW: Of course you could preselect the text and ask user to click CTRL+C but you lose user-experience.

like image 102
jave.web Avatar answered Sep 29 '22 07:09

jave.web