Javascript复制到Safari上的剪贴板？

Question

这可能是重复的问题,但我没有找到解决方案.

我想在按钮点击上复制文本.它在chrome,mozilla上工作(在windows和mac上工作但在linux上工作).它没有在野生动物园工作.

我正在使用document.execCommand("copy")命令进行复制.

safari支持这个命令吗？

有没有什么方法可以支持所有浏览器？

Answer 1

请检查我的解决方案.

它适用于Safari(在iPhone 7和iPad上测试)和其他浏览器.

window.Clipboard = (function(window, document, navigator) {
    var textArea,
        copy;

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

    function createTextArea(text) {
        textArea = document.createElement('textArea');
        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 copyToClipboard() {        
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }

    copy = function(text) {
        createTextArea(text);
        selectText();
        copyToClipboard();
    };

    return {
        copy: copy
    };
})(window, document, navigator);

// How to use
Clipboard.copy('text to be copied');

https://gist.github.com/rproenca/64781c6a1329b48a455b645d361a9aa3 https://fiddle.jshell.net/k9ejqmqt/1/

希望对你有所帮助.

问候.

Answer 2

这个问题问了四年之后，

\n\n

Safari 添加了剪贴板 API！

\n\n

您可以在 safari 上向剪贴板写入和读取文本和任意数据（在 iOS v13.4 和桌面版 v13.1 及以上版本中）。

\n\n

\n

关于 Clipboard 的 MDN 文档： \n Clipboard 接口实现了 Clipboard API，如果用户授予\xe2\x80\x94 权限，\n 则提供\xe2\x80\x94 对系统剪贴板内容的读写访问权限。剪贴板 API 可用于在 Web 应用程序中实现剪切、\n 复制和粘贴功能。

\n

\n\n

您可以通过以下方式实现您想要的目标：

\n\n

navigator.clipboard.writeText("YOUR_TEXT").then(function() {\n\n  /* clipboard successfully set */\n\n}, function() {\n\n  /* clipboard write failed */\n\n});\n

\n

Answer 3

最近我偶然发现了同样的问题并发现以下内容：

document.execCommand("copy")现在在 Safari 中工作没有任何问题。

如果您有一个特定的复制命令用例仅在 safari 中不起作用，您可能需要检查的一件事是您的复制命令是否在 API 回调内或以其他类似的异步方式运行。另外，Safari 中的复制仅在来自 DOM 事件时才有效（控制台测试不起作用）。

对我来说，要复制的文本来自异步调用的响应。我必须将 API 调用移至 onClick 之外以预取文本，然后仅在单击复制按钮时复制该文本。成功了！

以下代码在 Safari 中可以正常工作（假设它直接写入 DOM 事件处理程序，如 onClick）：

var clipBoardElem = document.createElement("input");
document.body.appendChild(clipBoardElem);
clipBoardElem.value = "text";
clipBoardElem.select();
var successfulCopy = document.execCommand('copy');

完成后，您可以删除临时元素：

document.body.removeChild(clipBoardElem)

Answer 4

因为第一个答案在 iPhone 10 Safari 上对我不起作用，所以我尝试寻找其他解决方案，并找到了此处描述的解决方案

基本上它说的是一个非常相似的解决方案，但语法不同：

受“IE 10+、Chrome 43+、Firefox 41+ 和 Opera 29+”支持

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
  // Select the email link anchor text  
  var emailLink = document.querySelector('.js-emaillink');
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);

  try {
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges();
});

body {
  padding: 10px;
}

<p>Email me at <a class="js-emaillink" href="mailto:chriscoyier@gmail.com">chriscoyier@gmail.com</a></p>

<p><button class="js-emailcopybtn">Copy Email</button></p>

它还提到了一个名为Clipboardjs 的库，它看起来很棒。

就我而言，这个简单的 js 代码适用于：

• iPhone 10 Safari
• 铬（安卓/电脑（67.0.3396.79））
• 歌剧（电脑（53.0.2907.68））

不幸的是它不起作用：

• PC / Android 火狐（60.0.1（64 位））

对于 Firefox，简单的选择和复制就可以了。

element.select();
document.execCommand('copy');

Answer 5

我发现对于 safari，需要在 document.execCommand() 工作之前选择文本。

此外，其他浏览器不支持 addRange()（在 Chrome 中已弃用），这意味着在某些情况下它没有正确地将选择和范围合并在一起。对于用户体验而言，这意味着用户需要在 Safari 中单击两次才能复制值。在添加范围之前添加 .removeAllRanges() 将有助于确保您为副本获取正确的选择。不清楚您是否还需要第二个 .removeAllRanges() 但我保留它以确保安全。

 copy(id) {
    var configId = document.querySelector(id);
    var range = document.createRange();
    range.selectNode(configId);
    var selection = window.getSelection()
    selection.removeAllRanges();
    selection.addRange(range);

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    selection.removeAllRanges();
  }

使用（在同一班级内）：

<Button icon="copy" onClick={() => {this.copy(id)}}/>

id可以是任何 html 选择器

这在 Chrome 和 Safari 中对我有用。

Answer 6

根据 CanIUse 的说法，iOS 上的 Safari 不支持 document.execCommand('copy')，可能是出于安全原因。