如何使用jQuery/JavaScript在Safari中复制到剪贴板？

Question

我查看了一些关于如何通过jquery在按钮点击时复制文本的答案和文章，但是它们都没有对我起作用。 我通过ajax将一个值附加到DOM中，希望在单击按钮时将其复制。

所有这些解决方案都适用于Chrome，并且如果使用jsfiddle / codepen，则它们在Safari（版本：13.0.5）中也适用，但是当通过单独的html和js文件使用时，在我的情况下，它们不起作用。

首先，我尝试创建一个具有位置：absolute和left：-99999的不可见输入，并使用jquery选择其中的文本，然后使用execCommand（“copy”）选中文本并复制。 但是这并没有起作用。 我还尝试了在此处提到的答案：Javascript Copy To Clipboard on safari？ 我还尝试了下面提到的两个功能，但没有成功。 除了这些函数之外，我还尝试了我能找到的每个javascript插件，但它们也没有起作用。

功能1：

function copy(value, showNotification, notificationText) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(value).select();
  document.execCommand("copy");
  $temp.remove();
  $(".copyfrom").val(value)
  $(".copyfrom").select();
  document.execCommand("copy");

  //trigger animation---
  if (typeof showNotification === 'undefined') {
    showNotification = true;
  }
  if (typeof notificationText === 'undefined') {
    notificationText = "Copied to clipboard";
  }

  var notificationTag = $("div.copy-notification");
  if (showNotification && notificationTag.length == 0) {
    notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
    $("body").append(notificationTag);

    notificationTag.fadeIn("slow", function () {
      setTimeout(function () {
        notificationTag.fadeOut("slow", function () {
          notificationTag.remove();
        });
      }, 1000);
    });
  }
}

函数2：

function copyToClipboard(textToCopy) {
  var textArea;

  function isOS() {
    return navigator.userAgent.match(/ipad|iphone/i);
  }

  function createTextArea(text) {
    textArea = document.createElement('textArea');
    textArea.readOnly = true;
    textArea.contentEditable = true;
    textArea.value = text;
    document.body.appendChild(textArea);
  }

  function selectText() {
    var range, selection;

    if (isOS()) {
      range = document.createRange();
      range.selectNodeContents(textArea);
      selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      textArea.setSelectionRange(0, 999999);
    } else {
      textArea.select();
    }
  }

  function copyTo() {
    document.execCommand('copy');
    document.body.removeChild(textArea);
  }

  createTextArea(textToCopy);
  selectText();
  copyTo();

  //trigger animation---
  if (typeof showNotification === 'undefined') {
    showNotification = true;
  }
  if (typeof notificationText === 'undefined') {
    notificationText = "Copied to clipboard";
  }

  var notificationTag = $("div.copy-notification");
  if (showNotification && notificationTag.length == 0) {
    notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
    $("body").append(notificationTag);

    notificationTag.fadeIn("slow", function () {
      setTimeout(function () {
        notificationTag.fadeOut("slow", function () {
          notificationTag.remove();
        });
      }, 1000);
    });
  }
}

这是我的ajax和html代码：

$(".fa-link").on("click", function () {
  var mlink = $(".boxmlink").attr("href").trim()
  var fetchWallID = new XMLHttpRequest()
  fetchWallID.open("POST", db, true);
  fetchWallID.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  fetchWallID.onload = function () {
    if (this.status == 200) {
      var url = $(location).attr("href").split("?")
      var id = (this.responseText).trim()
      var windowurl = url[0].trim()
      var finalurl = (windowurl + '?wallid=' + id).trim().replace("#", '')
      //copy(finalurl, true)
      //copyToClipboard(finalurl)
    }
  }
  fetchWallID.send("mlinkID=" + mlink)
})

html:

<a href="#" class="fa fa-link"></a>

- bl4ck120

Answer 1

创建一个元素，选择它，然后将文本附加到它上面可以解决这个问题。在Safari版本12.0.3上进行了测试。您的版本似乎也是如此，但步骤更多。请确保每个部分都有效。 <p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function copy(str) { const el = document.createElement('textarea'); el.value = str; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }; document.getElementById('button').addEventListener('click', evt => { copy(document.getElementById('test').innerHTML); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><span id=test>Hello World!</span> <button id=button>Copy Text</button> <input placeholder='Paste in Me!'/></code></pre> </div> </div> </p>

- Alain Cruz

---

这段代码，就像我看到的其他一些代码片段一样，在Chrome上可以正常工作。但是在最新版本的Safari 13.0.5上无法正常工作。 - bl4ck120

我的版本可以运行，不过我会深入研究一下。 - Alain Cruz

我在我的Safari上尝试了你的代码，它也可以工作。虽然我怀疑这与版本有关，但一定有其他原因导致了你的问题。也许是你的Safari阻止了JS？ - Alain Cruz

不，我的Safari上JS完全正常。我尝试在一个单独的空HTML文件和一个单独的JS文件中运行您的代码，以防有其他冲突的进程，但没有运气。 - bl4ck120

Answer 2

看看这个钢笔，它能在Safari上使用。请注意，document.execCommand('copy')仅适用于Safari 10版本及以上。

关键部分是使用范围来选择内容，如下所示：

var range = document.createRange();  
range.selectNode(emailLink);  
window.getSelection().addRange(range);  

- Jair Reina

---

我也看到了这个问题！但是除非它在JSFiddle或CodePen上运行，否则它甚至在我的Chrome上都无法工作。我使用的是最新的Safari 13.0.5。 - bl4ck120

它在Chrome上不起作用，只能在Safari上运行。我也是13.0.5版本。 - Jair Reina

很奇怪，对我来说情况正好相反。CodePen在Chrome和Safari上都可以运行，但是当我将其复制到本地进行测试时，在两者上都无法运行。 - bl4ck120