Copy text from <span> to clipboard

Question

I've been trying to copy the innerContent of a <span> to my clipboard without success:

HTML

<span id="pwd_spn" class="password-span"></span>

JavaScript

Function Call

    document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('copy').addEventListener('click', copy_password);
});

Function

function copy_password() {
    var copyText = document.getElementById("pwd_spn").select();
    document.execCommand("Copy");
}

I've also tried:

function copy_password() {
    var copyText = document.getElementById("pwd_spn").textContent;
    copyText.select();
    document.execCommand("Copy");
}

It seems like .select() doesn't work on a <span> element since I get the following error on both:

Answer 1

You could do this: create a temporary text area and append it to the page, then add the content of the span element to the text area, copy the value from the text area and remove the text area.

Because of some security restrictions you can only execute the Copy command if the user interacted with the page, so you have to add a button and copy the text after the user clicks on the button.

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>

Answer 2

See https://stackoverflow.com/a/48020189/2240670 there is a snippet of code for that gives you an example for a div, that also applies to a span, I did not copy it here to avoid duplication.

Basically, when you are copying to clipboard you need to create a selection of text, <textarea> and <input> elements make this easy because they have a select() method, but if you are trying to copy contents from any other type of element like a <div> or <span>, you'll need to:

1. Create/get a Range object(some browsers do not provide a constructor, or a decent way to do this). Calling document.getSelection().getRangeAt(0), I found works on most browsers except edge(ie11 works though).
2. Add the element you want to copy from to that range's selection.
3. Add that range to the window or document Selection.
4. Call document.execCommand("copy") to copy the selected text.

I also recommend checking the API of Selection and Range, that will give you a better grasp of this.