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...
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...
Share Improve this question asked Apr 30, 2013 at 7:21 jave.webjave.web 15k14 gold badges107 silver badges133 bronze badges 6- 2 Copy what ? Text ? Screenshot ? – Raptor Commented Apr 30, 2013 at 7:22
- 2 possible duplicate of How to copy to the clipboard in JavaScript? – Joseph Commented Apr 30, 2013 at 7:24
- @ShivanRaptor: Well mainly text, but I dont think it really matters... – jave.web Commented Apr 30, 2013 at 7:42
- @JosephtheDreamer:No duplicate that question is about how to do it cross-browser - not how to do it without flash (pure javascript) – jave.web Commented Apr 30, 2013 at 7:44
- for security reason, you can't work it out with JS only & cross-browser. – Raptor Commented Apr 30, 2013 at 7:45
3 Answers
Reset to default 8There 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" mand:
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 patibility 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 patibility 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
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 mand 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 mand 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./web/updates/2015/04/cut-and-copy-mands
BTW: Of course you could preselect the text and ask user to click CTRL+C but you lose user-experience.
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 patible is to use Flash.
For now you can select all the data you want to copy, and ask user to click CTRL+C.
Here is one way you can do it in IE...
<body>
<textarea rows="5" cols="20" wrap="hard" onblur="CopyToClipboard(this)"></textarea>
</body>
<script language="JavaScript">
function CopyToClipboard(text) {
Copied = text.createTextRange();
Copied.execCommand("Copy");
}
</script>