如何在没有 Flash 的情况下将 div 的内容复制到剪贴板答案

【问题标题】：How to copy a div's content to clipboard without flash如何在没有 Flash 的情况下将 div 的内容复制到剪贴板
【发布时间】：2014-04-13 21:16:34
【问题描述】：

就是这样 :) 我有一个 ID 为 #toCopy 的 div 和一个 ID 为 #copy 的按钮。按 #copy 时将 #toCopy 内容复制到剪贴板的最佳方法是什么？

【问题讨论】：

您是否检查了右侧“相关”标题下显示的任何“如何将内容复制到剪贴板”问题？
stackoverflow.com/questions/400212/… 的副本
唯一支持在没有 Flash 或其他第三方解决方案的情况下复制到剪贴板的浏览器是 Internet Explorer，祝你好运。
终于在 IE 中受益 @adeneo

标签： javascript jquery html copy

【解决方案1】：

您几乎可以在任何浏览器中从 input 元素（具有 .value 属性的元素）复制到剪贴板，但不能从 <div>、<p>、@ 等元素复制到剪贴板987654324@...（具有.innerHTML 属性的元素）。

但是我使用这个技巧来做到这一点：

创建一个临时输入元素，比如<textarea>
将innerHTML从<div>复制到新创建的<textarea>
将.value 的<textarea> 复制到剪贴板
删除我们刚刚创建的临时 <textarea> 元素

function CopyToClipboard (containerid) {
  // Create a new textarea element and give it id='temp_element'
  const textarea = document.createElement('textarea')
  textarea.id = 'temp_element'
  // Optional step to make less noise on the page, if any!
  textarea.style.height = 0
  // Now append it to your page somewhere, I chose <body>
  document.body.appendChild(textarea)
  // Give our textarea a value of whatever inside the div of id=containerid
  textarea.value = document.getElementById(containerid).innerText
  // Now copy whatever inside the textarea to clipboard
  const selector = document.querySelector('#temp_element')
  selector.select()
  document.execCommand('copy')
  // Remove the textarea
  document.body.removeChild(textarea)
}

<div id="to-copy">
  This text will be copied to your clipboard when you click the button!
</div>
<button onClick="CopyToClipboard('to-copy')">Copy</button>

有点晚了，但希望对你有所帮助！

【讨论】：

效果很好！
比我见过的任何类似“输入”的实现都要好，并且可以使用多个复制元素。谢谢！
想知道为什么不在函数的行尾使用分号！
@JalaliShakib 在 JavaScript 中是可选的。
有趣的是指出与具有 .value 属性的元素的区别。是的，效果很好

【解决方案2】：

没有id也一样：

function copyClipboard(el, win){
   var textarea,
       parent;

   if(!win || (win !== win.self) || (win !== win.window))
      win = window;
   textarea = document.createElement('textarea');
   textarea.style.height = 0;
   if(el.parentElement)
      parent = el.parentElement;
   else
      parent = win.document;
   parent.appendChild(textarea);
   textarea.value = el.innerText;
   textarea.select();
   win.document.execCommand('copy');
   parent.removeChild(textarea);
}

我没有测试不同的窗口 (iframes)！

【讨论】：

【解决方案3】：

更新答案 Javascript 在早期就被限制使用剪贴板。但现在它支持复制/粘贴命令。请参阅 mozilla 和 caniuse.com 的文档。

document.execCommand('paste')

确保您支持不支持的浏览器。

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand http://caniuse.com/#search=command

Javascript 不允许使用剪贴板，但其他插件如 flash 可以访问。

How do I copy to the clipboard in JavaScript?

【讨论】：

它相当新，因为当我回答这个问题时不支持它，我会小心使用它，因为只有最新的浏览器支持这个功能，这对一些目标受众来说很糟糕。最好的办法是使用 Flash，或者创建一个支持 Flash 作为后备的 pollyfill。如果你不能使用 flash，那么就不要实现这个，只有在支持的浏览器上才能使用它，并确保不支持它的浏览器也可以在没有它的情况下工作。
实际上，唯一不支持它的主流浏览器是 Safari。我为堆栈溢出制作了一个名为 Stack Copy Button 的插件（目前是 chrome 和 firefox，github.com/MrMino/StackCtrlC，无耻插件），它通过了代码检查没有问题。如果您建议进行后备，为什么不从标准中实际存在的内容中进行后备？
它是因为不是每个浏览器都支持它。
再一次，只有 Safari 没有。现在，您可以在检测到 Safari 时进行回退。为它制作一个像 flash 一样不安全的组件，我会更加小心。
你不能将最新版本的浏览器算作支持它，因为不是每个人都有最新版本的浏览器。即使使用默认启用自动更新的 chrome。