safari上的Javascript复制到剪贴板？

这可能是个重复的问题，但我没有找到解决办法

我正试图在点击按钮时复制文本。它在chrome、mozilla上工作（在windows和mac上工作，但在linux上不工作）。而且它不适合狩猎

我正在使用

document.execCommand（“复制”）

命令进行复制

safari是否支持此命令？

---

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

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

请检查我的解决方案

它可以在Safari（在iPhone7和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');

希望这对你有帮助

---

问候。

因为第一个答案在iPhone 10 Safari上对我不起作用，我试图找到其他解决方案，我找到了一个

基本上，它表示一个非常类似的解决方案，但语法不同：

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

var copyEmailBtn=document.querySelector（'.js emailcopybtn'）；
copyEmailBtn.addEventListener（'click'，函数（事件）{
//选择电子邮件链接锚文本
var emailLink=document.querySelector（'.js emailLink'）；
var range=document.createRange（）；
范围。选择节点（emailLink）；
window.getSelection（）.addRange（范围）；
试一试{
//现在我们已经选择了锚文本，执行copy命令
var successful=document.execCommand（'copy'）；
var msg=successful？'successful'：'successful'；
log（'Copy email命令为'+msg'）；
}捕捉（错误）{
log（'Oops，无法复制'）；
}
//删除选择-注意：应使用
//支持时移除范围（范围）
getSelection（）.removeAllRanges（）；
});
正文{
填充：10px；
}
给我发电子邮件

复制电子邮件
我也遇到了同样的问题-原来我的问题是因为我创建了一个临时的
选择
元素来复制文本，这很好，但我也通过各种方法隐藏了它，罪魁祸首是
元素.style.width=0
。删除它并使用其他方法隐藏它解决了我的问题

希望这能帮助遇到同样问题的人。
我发现对于safari，在document.execCommand（）工作之前需要选择文本

另外，其他浏览器（）不支持addRange（），这意味着有些实例无法正确地将选择和范围合并在一起。这对于用户体验意味着，用户需要在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();
  }

使用（在同一类中）：

{this.copy（id）}}/>

id可以是任何html选择器

这在Chrome和Safari中对我很有效。
经过4年的提问

safari添加了剪贴板API

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

：
剪贴板接口实现剪贴板API，提供
用户授予对内容的读写访问权限
系统剪贴板。剪贴板API可用于实现剪切，
在web应用程序中复制和粘贴功能

这就是你如何实现你想要的：

navigator.clipboard.writeText("YOUR_TEXT").then(function() {

  /* clipboard successfully set */

}, function() {

  /* clipboard write failed */

});

使用
copy
事件似乎对我有效


window.addEventListener（'copy'，（事件）=>{
event.preventDefault（）；
event.clipboardData.setData（'text/plain'，'foo:${Date.now（）}`）；
});
单击此处，按Cmd-C，粘贴到浏览器外部
最近，我偶然发现了相同的问题，并发现了以下内容：

document.execCommand（“copy”）
现在在Safari中可以正常工作

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

对我来说，要复制的文本来自异步调用的响应。我必须将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)

那么，对于所有浏览器，
复制到剪贴板
的最佳方式是什么，或者我们如何在safari中做到这一点呢？如果您不知道@Mahi clipboardjs实际上是使用
document.execCommand（'copy'）
实现的。签出sourcecode.document.execCommand（'copy'）是否在版本10之后的safari上工作safari是否有其他选择？我们有一个内部内容管理应用程序，我们在其中设置了一些用于营销的html模板，它们都使用Mac和Safari。。。让他们使用Chrome是一场斗争。检查这个问题：明白了！更新以添加代码。谢谢你的反馈。谢谢，这很有用。我不得不稍微调整一下以适应我的要求。浏览器检测代码在mac上不起作用（很容易修复）。此外，在我的iPhone上，当调用此代码时，键盘会弹出。还有一个简单的方法（将焦点返回到触发复制的元素）。你能为此激活fiddle吗？前面提到的演示链接处于非活动状态。你能激活它吗？我想他们终于意识到一些开发人员可能需要这个功能。它在safari 14中对我不起作用。我现在只是在ios 14.4.2（iPhone 8）上试用，所以它也很好用
document.body.removeChild(clipBoardElem)