Clicked item copy to clipboard

Question

I have three span with same class

<div>
    <span class="textValue">Atul</span>
    <span class="textValue">Kumar</span>
    <span class="textValue">Rajput</span>
</div>

I just want that, If I click on any of the spans, then the value of that span will be copied to the clipboard.

i.e. if I click on first span then "Atul" will be copied into the clipboard.

Have you even tried to tackle this on your own? https://www.w3schools.com/howto/howto_js_copy_clipboard.asp If yes post the code you wrote so we can fix it. — DanteTheSmith, Jul 13 '18 at 12:40
Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Liam, Jul 13 '18 at 12:41

Unmitigated · Accepted Answer · 2018-07-13T12:58:38.003

You can not select a span so you have to create a temporary textarea with the textContent of the span to execute the copy command.

<div>
    <span class="textValue" onClick="copy(this)">Atul</span>
    <span class="textValue" onClick="copy(this)">Kumar</span>
    <span class="textValue" onClick="copy(this)">Rajput</span>
</div>
<p/>
Try to paste the text that you copied:
<br/>
<input type="text"/>
 <p/>
<span id="result"></span>
<script>
var result = document.getElementById("result");
function copy(el){
  var copyText = el.textContent;
    var textArea = document.createElement("textarea");
    textArea.value =  copyText;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
   textArea.remove();
   result.innerHTML = "Copied text: "+copyText;
}
</script>

Dipali Sakle Systematix · Answer 2 · 2018-07-16T06:40:29.543

0

You can try this

 $(".textValue").click(function () {
    var spanVal = $(this).text();
    document.execCommand("copy");
    alert(spanVal);
});

edited Jul 16 '18 at 06:40

answered Jul 13 '18 at 12:51

Dipali Sakle Systematix

857
6
18

1

jQuery's `live()` method was removed in jQuery version 1.9. You should use `on()` instead. Also, your method does not work. – Unmitigated Jul 13 '18 at 18:39

Ankit Jaiswal · Answer 3 · 2018-07-13T13:19:18.930

You can try this codepen for different layout

OR

This Codepen

this way

const span = document.querySelector("span");
var result = document.getElementById("result");
function copy(el){
  var copyText = el.textContent;
    var textArea = document.createElement("textarea");
    textArea.value =  copyText;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
   textArea.remove();
   result.innerHTML = "Copied text: "+copyText;
}
</script>

<div>
    <span class="textValue"  onClick="copy(this)">Atul</span>
    <span class="textValue"  onClick="copy(this)">Kumar</span>
    <span class="textValue"  onClick="copy(this)">Rajput</span>
</div>

<span id="result"></span>

Clicked item copy to clipboard

3 Answers3