How to copy text to clipboard HTML?

Question

I have a set p element which contains a link. I would like for the user to click a button, and it gets the value of the p element and copies it to the user's clipboard.

function copy() {
  document.getElementById("link").copy;
}

#link {
  color: blue;
}

<p id="link" onclick="copy()">https://www.spotify.com/us/</p>

Does this answer your question? [How can I copy to clipboard in HTML5 without using flash?](https://stackoverflow.com/questions/26336138/how-can-i-copy-to-clipboard-in-html5-without-using-flash) — Theraot, Apr 25 '20 at 17:38

Sachin · Accepted Answer · 2020-04-26T15:54:38.367

2

function copy() {
  var copyText = document.getElementById("link").innerText;
  var elem = document.createElement("textarea");
  document.body.appendChild(elem);
  elem.value = copyText;
  elem.select();
  document.execCommand("copy");
  document.body.removeChild(elem);
  alert("Copied the text");
}

#link {
  color: blue;
}

<p id="link" onclick="copy()">https://www.spotify.com/us/</p>

Your copy function can be as follows

function copy() {
  var copyText = document.getElementById("link").innerText;
  var elem = document.createElement("textarea");
  document.body.appendChild(elem);
  elem.value = copyText;
  elem.select();
  document.execCommand("copy");
  document.body.removeChild(elem);
  alert("Copied the text");
}

edited Apr 26 '20 at 15:54

answered Apr 25 '20 at 16:54

Sachin

911
8
12

Could you please give a go at my edited answer? Thanks! – Sachin Apr 25 '20 at 17:08
TYSM! I was looking for a short and straightforward answer and you really helped! – hiphopfeels Apr 29 '20 at 14:13

score 0 · Answer 2 · answered Apr 25 '20 at 16:58

0

try this as the copy function

var text =  document.getElementById("link");
text.select();
document.execCommand("copy);

answered Apr 25 '20 at 16:58

Brecht Vanden Houwe

43
4

giovybus · Answer 3 · 2020-04-25T17:38:13.607

you can use input to copy text on clipboard

function copy() {
    /* Get the text field */
    var copyText = document.getElementById("link");

    /* Select the text field */
    copyText.select();
    copyText.setSelectionRange(0, 99999); /*For mobile devices*/

    /* Copy the text inside the text field */
    document.execCommand("copy");
    console.log("copied!");
}

<input id="link" onclick="copy()" value="https://www.spotify.com/us/">

Or if you want to use p then yuo can use this trick

function copy() {
    /* Get the text field */
    var copyText = document.getElementById("link");
    var copyP = document.getElementById("link_p");
    copyText.value=copyP.innerHTML;

    /* Select the text field */
    copyText.select();
    copyText.setSelectionRange(0, 99999); /*For mobile devices*/

    /* Copy the text inside the text field */
    document.execCommand("copy");
    console.log("copied!");
}

<input type="text" id="link" value="" style="display:none">
<p id="link_p" onclick="copy()">text</p>

score 0 · Answer 4 · answered Dec 17 '21 at 18:04

0

function copy() {
  document.getElementById("link").copy;
}

#link {
  color: blue;
}

<p id="link" onclick="copy()">https://www.spotify.com/us/</p>

answered Dec 17 '21 at 18:04

Mukoro Godwin

120
1
9

How to copy text to clipboard HTML?

4 Answers4