javascript简单实现跨浏览器复制粘贴

最近写一个小功能,需要点击按钮来把内容复制到剪贴板,虽然有不少插件可以很轻易的实现,不过其实用短短的几行原生js就足够了,代码不需要任何的依赖。

首先要了解的是clipboard的相关api,由于这个标准一直在草稿阶段,加上浏览器对权限的限制不一,因此兼容性并不是很好。

文档可以看这里:https://w3c.github.io/clipboard-apis/#widl-ClipboardEvent-clipboardData

具体的浏览器支持和详细的细节可以看这里:http://caniuse.com/#search=clipboard

在IE中可以通过getData和setData两个方法就可以实现复制和粘贴了:

function copy() {
  if (window.clipboardData) {
 	window.clipBoard.setData('Text', target.innerHTML)
  }
}

function paste(target) {
  if (window.clipboardData) {
    target.innerText = window.clipboardData.getData('Text');
    return;
  }
}

有一个更好的方法,是使用document.execCommand(‘copy’) 来执行复制操作,当然首先你需要先手动来选中需要复制的文本:

function copy(target){
  target.select();
  document.execCommand('copy');
}

对于chrome和火狐,因为上面的copy操作必须针对于可修改的目标,因此我们可以稍作修改:

function copy(target) {
  var textArea = document.createElement('textarea');
  // 由于火狐需要目标必须可见,因此我们可以设置透明度为0
  textArea.setAttribute('style','width:1px;border:0;opacity:0;');
  document.body.appendChild(textArea);
  textArea.value = target.innerHTML;
  textArea.select();
  document.execCommand('copy');
  document.body.removeChild(textArea);
}