Search code examples
javascriptclipboardcopy-paste

Copy text string on click


I want 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

Solution

  • 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>