工作剪贴板脚本与 Chrome 不兼容。适用于 Edge/IE

Question

我有一个有效的剪贴板脚本，我必须在我们的门户页面上使用它才能使用剪贴板功能。我们正在从 IE/Edge 移动到 Chrome，并且该脚本似乎无法在 Google Chrome 中运行。如果我们能找到一种方法使代码 chrome/multi 浏览器兼容，而不必为 Chrome-only 制作新脚本，我会很高兴。

虽然我确实有 Chrome 的工作脚本，但这意味着我将不得不使用剪贴板重新构建数百个页面，我宁愿让脚本已经嵌入所有这些页面 chrome兼容。以下是我正在使用的脚本：

(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

结果：在 IE/Edge 中，您单击按钮，分配给该按钮的文本将添加到剪贴板以供粘贴。然而，在 Chrome 中，点击按钮并没有任何反应。

Answer 1

只要输入可见，您的代码在 Chrome 中工作正常。

Chrome 不允许从隐藏输入复制。有多种解决方法。在下面的示例中，我使用绝对定位移动了屏幕的输入。

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

另一个例子：

Clipboard.js 是执行此操作的有用库。它还在幕后使用了视觉上隐藏的输入（与我的示例中的方式类似但更可靠）。

工作剪贴板脚本与 Chrome 不兼容。适用于 Edge/IE

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

javascript

clipboard

google-chrome