Question

那就是:)我有一个id为 #toCopy 的div，以及一个id为 #copy 的按钮。按 #copy 时，将 #toCopy 内容复制到剪贴板的最佳方法是什么？

Answer 1

您几乎可以在任何浏览器中从输入元素（具有.value属性的元素）复制到剪贴板，但您不能使用<div>之类的元素，<p>，<span> ...（具有.innerHTML属性的元素）。

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

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

＆＃13;

<textarea>

＆＃13;

function CopyToClipboard (containerid) {
  // Create a new textarea element and give it id='temp_element'
  var 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
  var selector = document.querySelector('#temp_element')
  selector.select()
  document.execCommand('copy')
  // Remove the textarea
  document.body.removeChild(textarea)
}

＆＃13;

迟到但希望有所帮助！

Answer 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）进行过测试！

Answer 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?

如何将div的内容复制到剪贴板而不使用flash

3 个答案: