Copy text string on click

Matthew picture Matthew · Jul 13, 2017 · Viewed 67.5k times · Source

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

guest271314 picture guest271314 · Jul 13, 2017

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>