cannot copy text to clipboard but innerHTML reads content

Question

I am trying to copy contents of a span element but I failed so far with no error in chrome:

const element = document.getElementById("element");
 console.log(element.innerHTML); //consoles Data
 //below doesn't copy contents of the element to clipboard
 const node = document.createRange();
 node.selectNode(element);
 window.getSelection().removeAllRanges();
 window.getSelection().addRange(node);
 document.execCommand("copy");

 <span id="element">Data</span>

Since I can see contents of the element via innerHTML, I am thinking the element is indeed accessible. Why cant I copy the text?

score 0 · Answer 1 · answered Mar 01 '21 at 14:50

This answers your questions:

document.getElementById("cp_btn").addEventListener("click", copy_password);

function copy_password() {
    var copyText = document.getElementById("pwd_spn");
    var textArea = document.createElement("textarea");
    textArea.value = copyText.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
    textArea.remove();
}

<span id="pwd_spn" class="password-span">Test</span>
<button id="cp_btn">Copy</button>

score 0 · Answer 2 · answered Mar 01 '21 at 14:55

The only thing that is wrong in your code is that there is no button. It is impossible to copy text without one, in order to prevent clipboard poisoning. The following should work for you:

function copy() { 
   const element = document.getElementById("element");
   const node = document.createRange();
   node.selectNode(element);
   window.getSelection().removeAllRanges();
   window.getSelection().addRange(node);
   document.execCommand("copy");
}

<span id="element">Data</span>
<button onclick="copy()">Copy</button>

However, I think that a simpler way to achieve the same thing is this (Copy text from <span> to clipboard):

function copy() {
    var copyText = document.getElementById("element");
    var textArea = document.createElement("textarea");
    textArea.value = copyText.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
    textArea.remove();
}

<span id="element">Data</span>
<button onclick="copy()">Copy</button>

cannot copy text to clipboard but innerHTML reads content

2 Answers2