7

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...

jave.web
  • 11,102
  • 9
  • 70
  • 98
  • 2
    Copy what ? Text ? Screenshot ? – Raptor Apr 30 '13 at 07:22
  • 2
    possible duplicate of [How to copy to the clipboard in JavaScript?](http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript) – Joseph Apr 30 '13 at 07:24
  • @ShivanRaptor: Well mainly text, but I dont think it really matters... – jave.web Apr 30 '13 at 07: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 Apr 30 '13 at 07:44
  • for security reason, you can't work it out with JS only & cross-browser. – Raptor Apr 30 '13 at 07:45
  • @ShivanRaptor: But you can do it with flash? Personally I think flash is even more dangerous since you cant really check the code... – jave.web Apr 30 '13 at 07:51

3 Answers3

4

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.

Alex
  • 10,998
  • 6
  • 34
  • 52
Zaheer Ahmed
  • 26,435
  • 11
  • 70
  • 105
  • Cmon, theres have to be a way how to do that, like I said, flash will disappear in a few years and if you can do a workaround in flash - whats the point in denying it in JS? O.o Or shall we just give up "copy to clipboard" functionality in web-browsers? – jave.web Apr 30 '13 at 07:38
  • That is just sad... I gave you a vote-up but I wont chose it as an answer - to inspire people to answer in future just for the case browsers will come to their minds :) – jave.web Apr 30 '13 at 07:49
  • 1
    It's a completely sensible choice by the browser vendors not to grant access to the clipboard via JavaScript. The Flash stuff shouldn't be allowed either, but that's not an area over which browsers have any control. I'd say you can accept this as an answer as it is not possible and won't be any time soon. – Sacha Apr 30 '13 at 08:47
  • But someday they may add this functionality, my suggestion is to allow copy-to-clipboard on user interact only, text only copy (escaped) – jave.web Aug 03 '13 at 09:27
  • 1
    This will never be possible cross-browser as it opens up a major security risk. – Mike Oct 23 '13 at 23:42
  • @Mike not if you do it right and as I mentioned 3 years ago - and the browsers seem to be on that way right now ... (see my answer update) – jave.web Mar 23 '16 at 22:22
4

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.

jave.web
  • 11,102
  • 9
  • 70
  • 98
-2

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>
double-beep
  • 3,889
  • 12
  • 24
  • 35
Linga
  • 9,691
  • 9
  • 45
  • 91
  • 1
    Yes, this is an ancient technique supported only on IE. It makes use of proprietary Microsoft APIs and cannot be considered JavaScript-only. – davidgoli May 02 '13 at 22:12