在不使用flash的情况下将选定的文本复制到剪贴板 - 必须跨浏览器。

Question

我想要一个按钮，它可以选择中的文本并将其复制到剪贴板。我似乎找不到适用于所有浏览器且不使用Flash的解决方案。</p> <p>这肯定是可以实现的吧？我经常看到类似的功能，但我想尽可能避免使用Flash，因为有些人没有安装它。</p> <p>目前，我只能做到选择文本：</p><pre class="guess-Rust"><code>function copyCode() { $("#output-code").focus(); $("#output-code").select(); } </code></pre><p>（聚焦并非必要）</p>

- Nick Brunt

Answer 1

execCommand('copy')

有一个非常新的选项，它是跨浏览器的，但需要时间让每个人更新其浏览器。

它通过使用document.execCommand('copy');函数来实现。使用此函数，您将复制所选文本。这不仅适用于textarea，还适用于页面上选择的所有文本（例如span，p，div等）。

在Internet Explorer 10+，Chrome 43+，Opera 29+和Firefox 41+中可用（请参见此处的execCommand兼容性）。

示例

// Setup the variables
var textarea = document.getElementById("textarea");
var answer  = document.getElementById("copyAnswer");
var copy    = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {

   // Select some text (you could also create a range)
   textarea.select(); 

   // Use try & catch for unsupported browser
   try {

       // The important part (copy selected text)
       var ok = document.execCommand('copy');

       if (ok) answer.innerHTML = 'Copied!';
       else    answer.innerHTML = 'Unable to copy!';
   } catch (err) {
       answer.innerHTML = 'Unsupported Browser!';
   }
});

<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>
   

- arc

---

在 Firefox 中显示 不支持的浏览器！ - Madhawa Priyashantha

Firefox将在九月份支持它。 - arc

@Omix22，嗯，不幸的是仍然不支持。我这里使用的是Waterfox 40.0.2。 - Lucien

更好的检查浏览器支持链接：https://caniuse.com/#search=execcommand - yezzz

如何在不仅限于一个<textarea>的情况下，使用不同的ID来使用它？ - Grischa

@Grischa 对不起，这是对你的问题非常晚的回答，但你可以用任何元素的变量替换 textarea.select(); 中的 textarea。 - MForMarlon

Answer 2

此回答虽然在2011年准确无误，但现在已经过时了。 请参阅arc的答案，或https://dev59.com/fHRC5IYBdhLWcg3wJNcN#30810322

---

如果您不想使用Flash插件，则必须使用它来自动将文本复制到客户端的剪贴板。浏览器是这样设计的，因为网站自动修改客户端的剪贴板而没有活动-x组件的帮助是一个安全问题。请注意，活动-x组件是在用户计算机上运行的程序，技术上需要用户的同意才能安装。考虑到剪贴板是操作系统组件，很高兴网络浏览器默认不允许网站劫持它。

如果用户没有Flash、禁用了Flash或禁用了活动-X，则他或她可能对安全非常警惕，并且不希望您干扰他或她的键盘。在这一点上，用户习惯于在网站中没有太多自动或基于脚本的功能。最好不要试图公开违抗终端用户的意愿。

请参考以下Stack Overflow链接:

1. 如何在JavaScript中复制到剪贴板？
2. 在JavaScript中跨浏览器检测Flash

最终的答案是使用Zero Clipboard，它是一个库，使用小型、不可见的Flash电影和JavaScript来使用您想要的剪贴板功能。该库可在此处获取：https://github.com/zeroclipboard/zeroclipboard第二个链接显示如何检测Flash是否禁用或未安装，这样您就可以像使用JavaScript一样显示警告消息。

- Devin Burke

---

我并不明白一个标有“选择并复制”按钮的明显文本区域下方是如何妨碍或“违背最终用户的意愿”的... 如果他们想手动完成，就没有必要按下按钮。 - Nick Brunt

至于最终用户的愿望，我是指如果用户的设置不允许脚本或ActiveX组件，开发人员不应该强制执行。 - Devin Burke

是的，我明白了，基本上只有少数人会利用这种权力做出恶意行为，破坏了其他人的使用体验。我只会选择文本并让用户自己复制它。感谢您详细的回答。 - Nick Brunt

大家好，与其提出100个为什么这是个坏主意的理由，能否有人简单回答一下问题呢？如果无法实现，那也没关系，不要因想以某种方式实现某事而责备别人。我的客户希望有这样一个功能——至于安全性，恶意人士总是可以“引诱”某个人点击看似无害的东西，所以这种无法复制的方法只是在惩罚大多数需要该功能的人，而这种滥用可能只是少数人的行为。 - exoboy

实际上，如果您能够使用不可见的Flash来完成与JS相同的操作，则没有安全性:-]。幸运的是，剪贴板API即将推出... - Nux

Answer 3

现在我们有由@zenorocha制作的Clipboard.js。

要使用它，下载并在您的page.html页面上调用脚本（或使用bower或npm进行安装）。

<script src="path_to_script/clipboard.min.js"></script>

在你的 script.js 文件上实例化一个新的触发器

new Clipboard('.trigger');

请前往以下链接查看使用示例：http://zenorocha.github.io/clipboard.js/#usage

- Gabriel Gularte

Answer 4

function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;  
    textArea.style.width = '2em';
    textArea.style.height = '2em'; 
    textArea.style.padding = 0;  
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';   
    textArea.style.background = 'transparent';
    textArea.value = text;
    textArea.id = 'ta';
    document.body.appendChild(textArea);
    //textArea.select();
    var range = document.createRange();
    range.selectNode(textArea);
    textArea.select();
    window.getSelection().addRange(range);
    try {
        var successful = document.execCommand('copy');
    } catch (err) {
         alert('Oops, unable to copy');
    }
    document.body.removeChild(textArea);
    return successful;
}

我希望这能有所帮助。

- Iyappan

---

如果您能解释一下您上面实际做了什么，那会更有帮助。 - Liam

它在DOM中创建了一个隐藏元素，将函数参数中的文本放入其中，将元素内容（即文本）复制到剪贴板中并删除该元素。简单地说，它是一个函数，允许您传递文本并将其添加到剪贴板中。相当聪明！ - Filipe Melo

Answer 5

这是一个相对较晚的回应，但对于那些在未来搜索并且在实现execCommand('copy')事件时遇到问题的人来说，需要注意在桌面和移动设备上都能正常工作。跨浏览器，移动友好且无需外部来源或程序。

function CopyString(){
    var StringToCopyElement = document.getElementById('YourId');
    StringToCopyElement.select();

    if(document.execCommand('copy')){
        StringToCopyElement.blur();     
    }else{
        CopyStringMobile();
    }
}

function CopyStringMobile(){
    document.getElementById("YourId").selectionStart = 0;
    document.getElementById("YourId").selectionEnd = 999;
    document.execCommand('copy');

    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}

将CopyString()函数设置为您要触发事件的点击事件。此功能适用于移动和桌面操作系统。 说明 您需要有两种不同的选择字符串方法，因为到目前为止，通过桌面进行选择剪贴板内容的方式无法用于移动设备。我有一个if-then函数来捕获桌面方式是否有效，如果无效，则触发在移动设备上有效的代码。此方法不需要下载或链接。两种方法都会突出显示要复制的文本，然后将复制命令发送到剪贴板，随后取消选择要复制的字符串。您可以按照自己的喜好混合代码，但这是实现此操作的方法。

- MattOlivos

---

注意！Select()函数仅适用于文本字段（输入或文本区域）。 - o139

Answer 6

我在浏览器中使用剪贴板属性。

const text = "THE CONTENT THAT YOU WANT TO COPY TO CLIPBOARD";

// check if navigator has the clipboard property
if(navigator.clipboard){
await navigator.clipboard.writeText(text);
}

- maybeolivier