<div class="container py-md-3">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Copy Demo</h5>
          <input type="text" id="copy" value="VcaXAXfUxXcHywAhiWXraPPNjY9hgV" class="form-control" />
          <p class="card-text"><small class="text-muted" id="copy-status">Click the key to copy</small></p>
        </div>
      </div>

      <br />

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Paste here</h5>
          <textarea id="paste" class="form-control"></textarea>
        </div>
      </div>
      
      <br />
      
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Read more</h5>
          <a href="http://daily-dev-tips.com/posts/javascript-paste-text-from-the-clipboard/" target="blank" class="btn btn-primary">Visit the blog</a>
        </div>
      </div>
      
    </div>
  </div>
</div>

document.addEventListener(
  "click",
  function (event) {
    // Only fire if the target has id copy
    if (!event.target.matches("#copy")) return;

    if (!navigator.clipboard) {
      // Clipboard API not available
      return;
    }
    const text = event.target.value;
    try {
      navigator.clipboard.writeText(text);
      document.getElementById("copy-status").innerText = "Copied to clipboard";
      setTimeout(function () {
        document.getElementById("copy-status").innerText = "Click to copy";
      }, 1200);
    } catch (err) {
      console.error("Failed to copy!", err);
    }
  },
  false
);

const paste = document.getElementById("paste");
paste.addEventListener("click", () => {
  navigator.clipboard
    .readText()
    .then((clipText) => (paste.innerText = clipText));
});