Copy text innerHTML of element to clipboard

Question

I was try many solutions in stackoverflow, but it not work.(here and here)

I try it in Website and use chrome extension for run code (chrome 59.0.3071.104 64bit)

<h4 align="center">text data to copy</h4>

var copy_text = document.getElementsByTagName("h4")[0];
copy_text.select(); //-> error: select is not a function

and

var range = document.createRange();
range.selectNode(copy_text);
window.getSelection().addRange(range);
document.execCommand("copy"); //-> clipboard not change

Any solution for this? Thankyou.

Edit: I think my problem is page loading (security brower), all solution work with user interactive

console.log (document.queryCommandSupported('copy')) what output do you have with this command? — qiAlex, Jul 04 '17 at 14:20
Did you try [this option](https://stackoverflow.com/a/987376/2419531)? — Saravana, Jul 04 '17 at 14:49
@Saravana: `window.getSelection().addRange(range);` sellect success too. — Trương Quốc Khánh, Jul 04 '17 at 15:54

score 2 · Answer 1 · edited Jul 04 '17 at 16:49

2

This works for me.

var copyTextareaBtn = document.querySelector('.copybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copy_text = document.getElementsByTagName("h4")[0];
  var range = document.createRange();
  range.selectNode(copy_text);
  window.getSelection().addRange(range);

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<button class="copybtn">Copy</button>
<h4 align="center">text data to copy</h4>

But it isn't working if I try to copy not on click, but when the page is loaded

edited Jul 04 '17 at 16:49

Jose Gomez

548
4
13

answered Jul 04 '17 at 14:39

qiAlex

3,794
2
11
30

To call the function on page load you can use jQuery `$.ready()` or if you don't want to use jQuery you can follow these instructions: [pure JavaScript equivalent to jQuery's $.ready()](https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the) – Jose Gomez Jul 04 '17 at 14:51
@JoseGomez: `$('document').ready(function() { var copy_text = document.getElementsByTagName("h4")[0]; var range = document.createRange(); range.selectNode(copy_text); window.getSelection().addRange(range); document.execCommand("copy"); });` It still fail :( – Trương Quốc Khánh Jul 04 '17 at 15:44
2

Hello again, looking further into this I've found the following in W3 specs: [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis) Basically it sais that you cannot interact with clipboard instead user triggers the action (clicking a button or so). I think you can't edit users clipboard in document.ready or similar :( – Jose Gomez Jul 06 '17 at 12:17
Hmmmm, i think about solution add a button to copy that text and do print() to pdf.(and hide that button when click - not print that button) – Trương Quốc Khánh Jul 23 '17 at 03:44
Doesn't work in Chrome: [Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See https://www.chromestatus.com/features/6680566019653632 for more details. – robisrob Aug 19 '19 at 17:08
before `addRange()` I had to add `selection.removeAllRanges();` then it worked - tested in Chrome – TmTron Aug 04 '20 at 13:48

score 1 · Answer 2 · answered Jul 04 '17 at 14:46

1

Here is a quick hacky way to do what you want, there is a hidden input that we put the data in and then copy it from there. (The text area is just somewhere to paste into)

function copyText(e) {
  var textToCopy = document.querySelector(e);
  var textBox = document.querySelector(".clipboard");
  textBox.setAttribute('value', textToCopy.innerHTML);

  textBox.select();
  document.execCommand('copy');
}

.hidden {
  position: fixed;
  bottom: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
}

<h4 class="text" align="center">Text data to copy</h4>

<button onclick="copyText('.text')" class="copy">Copy</button>
<br><br>
<textarea></textarea>

<input class="clipboard hidden" />

answered Jul 04 '17 at 14:46

Andrew Bone

6,549
2
15
31

`var copy_text = document.getElementsByTagName("h4")[0]; var hidden_ = document.createElement("input"); hidden_.setAttribute("class","clipboard hidden"); copy_text.appendChild(hidden_); copy_text.setAttribute("class","copy_text"); function copyText(e) { var textToCopy = document.querySelector(e); var textBox = document.querySelector(".clipboard"); textBox.setAttribute('value', textToCopy.innerHTML); textBox.select(); document.execCommand('copy'); } copyText(".copy_text");` – Trương Quốc Khánh Jul 04 '17 at 15:36
it fail too, i think problem is page loading. All solution (button) success when the page is loaded – Trương Quốc Khánh Jul 04 '17 at 15:36
This isn't working for me Also, why not ? – pixelearth Dec 09 '18 at 22:13

score 0 · Answer 3 · answered Nov 05 '19 at 06:14

Here, the first example. https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f. My example is re-written by my needs but You'll get the point :)

<div onclick="bufferText()">Миньор Перник!</div>
<script>
   function bufferText() {    
        const el = document.createElement("textarea");
        el.value = event.target.innerHTML;
        document.body.appendChild(el);
        el.select();
        document.execCommand("copy");
        document.body.removeChild(el);
   }
</script>

Copy text innerHTML of element to clipboard

3 Answers3