Working clipboard script not compatible with Chrome. Works with Edge/IE

Question

I have a working clipboard script that I have to use on our portal page to utilize clipboard functionality. We are moving from IE/Edge to Chrome, and it seems this script will not function in Google Chrome. I would love it if we can find a way to make the code chrome/multi browser compatible without having to make a new script for Chrome-only.

While I do have a working script for Chrome, it would mean i would have to re-build hundreds of pages using clipboard, and I would rather make the script already embedded in all these pages chrome compatible. Below is the script i am using:

(function() {

    'use strict';

  // click events
  document.body.addEventListener('click', copy, true);

    // event handler
    function copy(e) {

    // find target element
    var 
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);

    // is element selectable?
    if (inp && inp.select) {

      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();

        // copied animation
        t.classList.add('copied');
        setTimeout(function() { t.classList.remove('copied'); }, 1500);
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }

    }

    }

})();

// Button must include data-copytarget="#website" with the #xxx matching the element id

Results: In IE/Edge, you click on the button and the assigned text to that button is added to the clipboard for pasting. In Chrome however, clicking on the button and nothing happens.

score 0 · Accepted Answer · answered Sep 12 '19 at 15:20

Your code works fine in Chrome as long as the input is visible.

Chrome does not allow copying from a hidden input. There are multiple workarounds. In the example below, I've moved the input of screen using absolute positioning.

(function() {
  "use strict";

  // click events
  document.body.addEventListener("click", copy, true);

  // event handler
  function copy(e) {
    // find target element
    var t = e.target,
      c = t.dataset.copytarget,
      inp = c ? document.querySelector(c) : null;

    // is element selectable?
    if (inp && inp.select) {
      // select text
      inp.select();

      try {
        // copy text
        document.execCommand("copy");
        inp.blur();

        // copied animation
        t.classList.add("copied");
        setTimeout(function() {
          t.classList.remove("copied");
        }, 1500);
      } catch (err) {
        alert("please press Ctrl/Cmd+C to copy");
      }
    }
  }
})();

#vishidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

<div>
  <input type="text" id="text" value="visible test" readonly="true">
  <button type="button" data-copytarget="#text">copy</button>
</div>

<div>
  <input type="hidden" id="hidden" value="hidden test" readonly="true">
  <button type="button" data-copytarget="#hidden">copy hidden</button>
</div>

<div>
  <input type="text" id="vishidden" value="visually hidden test" readonly="true">
  <button type="button" data-copytarget="#vishidden">copy visually hidden</button>
</div>

<div>
  <textarea cols="30" rows="10" placeholder="paste here to test"></textarea>
</div>

Another example: Using execCommand (Javascript) to copy hidden text to clipboard

Clipboard.js is a useful library to do this. It also uses a visually hidden input behind the scenes (in a similar but more robust way than in my example).

So i already have the input fields hidden, sorta. The same issue occurred with Edge having the same restriction. I took care of it by unhiding the fields and just making the width so small its not visible. That worked in Edge, but still wont work in Chrome. Should that be a problem? — pse7entma, Sep 12 '19 at 15:27
From my testing, positioning it off the screen is the only thing that works. Setting the width or height to 0 didn't. — Timo, Sep 12 '19 at 15:30
That worked. Thank you! The only thing i added was your CSS and removed mine! — pse7entma, Sep 12 '19 at 15:59

Working clipboard script not compatible with Chrome. Works with Edge/IE

1 Answers1