JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<textarea name="test" id="test" cols="30" rows="10"></textarea>
<button id="copyToClipboard">Copy To Clipboard</button>

JavaScript

function copyToClipboard(text) {
  if (window.clipboardData && window.clipboardData.setData) {
    // IE specific code path to prevent textarea being shown while dialog is visible.
    return clipboardData.setData("Text", text);

  } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
    var textarea = document.createElement("textarea");
    textarea.textContent = text;
    textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
    document.body.appendChild(textarea);
    textarea.select();
    try {
      return document.execCommand("copy"); // Security exception may be thrown by some browsers.
    } catch (ex) {
      console.warn("Copy to clipboard failed.", ex);
      return false;
    } finally {
      document.body.removeChild(textarea);
    }
  }
}

document.getElementById('copyToClipboard').onclick = function() {
  var t = document.getElementById('test');
  if (!copyToClipboard(t.value)) {
    alert('Your browser doesn\'t support auto copy. Please use \'cntl+c\' or \'cmnd+c\' to copy');
    t.select();
  }
}