Copy text string on click

Question

I spent a good 20 min searching online for this, but couldn't find it. What I want is to to be able to copy a text string on click without a button. The text string will be inside a "span" class.

1. User hovers over text string
2. User clicks text string
3. Text string is copied to clipboard

Any help would be greatly appreciated. Thanks!

Answer 1

You can attach copy event to <span> element, use document.execCommand("copy") within event handler, set event.clipboardData to span .textContent with .setData() method of event.clipboardData

const span = document.querySelector("span");    span.onclick = function() {    document.execCommand("copy");  }    span.addEventListener("copy", function(event) {    event.preventDefault();    if (event.clipboardData) {      event.clipboardData.setData("text/plain", span.textContent);      console.log(event.clipboardData.getData("text"))    }  });

<span>text</span>

Answer 2

Try this .document.execCommand('copy')

1. click the element and copy the text and post with tmp input element
2. Then copy the text from this input

function copy(that){  var inp =document.createElement('input');  document.body.appendChild(inp)  inp.value =that.textContent  inp.select();  document.execCommand('copy',false);  inp.remove();  }

<p onclick="copy(this)">hello man</p>