13

That's it :) I have a div with the id #toCopy, and a button with the id #copy. What's the best way to copy #toCopy content to clipboard when pressing #copy?

Luis Gallego
  • 315
  • 1
  • 3
  • 11
  • 1
    Have you checked any of the "how do I copy stuff to the clipboard" questions shown under the "Related" heading to the right? – Pointy Apr 13 '14 at 21:19
  • 2
    Duplicate of http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript?rq=1 – Emil L Apr 13 '14 at 21:19
  • 1
    The only browser that supports copying to the clipboard without Flash or other third party solutions is Internet Explorer, so good luck with that. – adeneo Apr 13 '14 at 21:31
  • 2
    Finally a benefit in IE @adeneo – Idris Apr 13 '14 at 21:48

3 Answers3

53

You can copy to clipboard almost in any browser from input elements only (elements that has .value property), but you can't from elements like <div>, <p>, <span>... (elements that has .innerHTML property).

But I use this trick to do so:

  1. Create a temporary input element, say <textarea>
  2. Copy innerHTML from <div> to the newly created <textarea>
  3. Copy .value of <textarea> to clipboard
  4. Remove the temporary <textarea> element we just created

function CopyToClipboard (containerid) {
  // Create a new textarea element and give it id='temp_element'
  const textarea = document.createElement('textarea')
  textarea.id = 'temp_element'
  // Optional step to make less noise on the page, if any!
  textarea.style.height = 0
  // Now append it to your page somewhere, I chose <body>
  document.body.appendChild(textarea)
  // Give our textarea a value of whatever inside the div of id=containerid
  textarea.value = document.getElementById(containerid).innerText
  // Now copy whatever inside the textarea to clipboard
  const selector = document.querySelector('#temp_element')
  selector.select()
  document.execCommand('copy')
  // Remove the textarea
  document.body.removeChild(textarea)
}
<div id="to-copy">
  This text will be copied to your clipboard when you click the button!
</div>
<button onClick="CopyToClipboard('to-copy')">Copy</button>
starball
  • 20,030
  • 7
  • 43
  • 238
Hani
  • 2,122
  • 1
  • 17
  • 17
0

The same without id:

function copyClipboard(el, win){
   var textarea,
       parent;

   if(!win || (win !== win.self) || (win !== win.window))
      win = window;
   textarea = document.createElement('textarea');
   textarea.style.height = 0;
   if(el.parentElement)
      parent = el.parentElement;
   else
      parent = win.document;
   parent.appendChild(textarea);
   textarea.value = el.innerText;
   textarea.select();
   win.document.execCommand('copy');
   parent.removeChild(textarea);
}

I didn't tested for different windows (iframes) though!

centurian
  • 1,168
  • 13
  • 25
-5

UPDATED ANSWER Javascript was restricted from using the clipboard, early on. but nowadays it supports copy/paste commands. See documentation of mozilla and caniuse.com.

document.execCommand('paste')

make sure that you support browsers that don't.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand http://caniuse.com/#search=command

Javascript is not allowed to use the clipboard, but other plugins like flash do have access.

How do I copy to the clipboard in JavaScript?

Community
  • 1
  • 1
Zezura
  • 128
  • 1
  • 9
  • its fairly new, because it was not supported when I answered this question, I would be careful with using this because only the newest browsers support this functionality and that's bad with some of the targeted audiences. Best you can do is using Flash, or creating a pollyfill that supports flash as fallback. If you cant use flash, then dont implement this at all of make a possibility to use it only on supported browsers and make sure that browser that dont support it can work without it aswell. – Zezura Apr 14 '16 at 20:21
  • Actually, the only major browser that doesn't support it already is Safari. I made an addon for stack overflow called Stack Copy Button (chrome and firefox for now, https://github.com/MrMino/StackCtrlC, shameless plug), and it passes the code checks no problem. If you are suggesting a fallback, why not a fallback from something that is actually in the standard? – Błażej Michalik Apr 14 '16 at 21:38
  • its because not every browser supports it. – Zezura Apr 15 '16 at 12:11
  • Again, only Safari doesn't. For now you can just make a fallback when Safari is detected. Making a component in something as unsecure as flash for it, is what I would be a lot more careful with. – Błażej Michalik Apr 16 '16 at 03:58
  • you cant count the latest version of a browser as supporting it, because not everybody has an up to date browser.. even with chrome where auto-update is enabled by default. – Zezura Apr 19 '16 at 19:23
  • Firefox was last to the party for it, and it supports it since v41. It's been ~8 big updates since then, Firefox is now in v45. Stop with the excessive backwards compatibility bullsh*t. It is not something website breaking. – Błażej Michalik Apr 20 '16 at 13:27
  • by [mozilla's docs](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) safari has no support, its still not implemented in Safari, so the best programming paradigm would be to make a fallback (polyfill) where you can show a message with the question if they would press CTRL + C. instead of a button that just don't work. you can better be SAFE then SORRY. and dont be lazy. Its the best way for today, and for the days to come. also https://clipboardjs.com/ is a nice way, with a safari update you only would need a lib.js update. – Zezura Apr 20 '16 at 17:49
  • That is what I Was saying. Safari doesn't implement this for their security reasons. It has ~3% of browser usage right now, it shouldn't be the reason to use a insecure flash fallback for this. – Błażej Michalik Apr 20 '16 at 22:43
  • i agree, just make sure it doesn't show a copy paste button when its not supported, right :) – Zezura Apr 21 '16 at 11:01