JS实现一键复制的多种方式及其比较

前言

需要实现一个一键复制文本的功能,试了能搜到的几种方法,都有各种不足,最后选择了clipboard.js实现,以下分别简要说明下几种方法和不足,以及clipboard.js的用法.

几种实现

1. jQuery库的jQuery-zclip.
   需要依赖jQuery和基于jQuery的zclip,让人不能接受的是其实现需要依赖flash,在这个主流浏览器都禁用flash的时代,不得不说这个插件兼容性几乎为0.
   因为应用性太低,这里就不贴实现代码了,感兴趣的同学可以自己搜一下.
2. 原生js
   浏览器提供了copy命令 ，可以复制选中的内容document.execCommand("copy")。如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用copy 命令，将文本复制到剪切板，但是 select() 方法只对<input> 和 <textarea> 有效，如果需要对其他元素进行复制，可以考虑在页面添加一个隐藏的textarea，同步下两个元素的值即可。

• 优点:
  原生js,不依赖第三方插件

• 缺点:
  mac下不兼容

• 实现:

<!-- 文本所在的代码块 -->
<div id='textDiv' >text you want to copy</div>

<!-- 隐藏的文本域用来同步选中需要复制的文本 -->
<textarea id='textArea' style='display: none'></textarea>

<!-- 复制按钮 -->
<input type='button' id='copyBtn' onclick='copyText()'/>

<script>
var copyText = function() {
    // 同步文本
    var text = document.getElementById('textDiv').innerText
    var textArea = document.getElementById('textArea')
    textArea.value = text
    // 选中文本
    textArea.select()
    // 复制
    document.execCommand('copy')
}

</script>

3. clipboard.js git主页

• 优点, 主页已经讲得很明白:

1. No Falsh 不依赖flash
2. No Framework 不依赖框架
3. Just 3kb gzipped 压缩后只有3k

• 安装:
  我这里是用到老项目中,所以直接clone了一份源码,把其中的clipboard.min.js 拿到项目中,页面中添加依赖
  <script src="clipboard.min.js"></script>
• 使用:

<!-- 你要复制的文本所在元素 -->
<input id="foo" value="要复制的文本内容">

<!-- 复制按钮,通过id绑定目标元素 -->
<button class="btn" data-clipboard-target="#foo">
    复制
</button>

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

<script>
// 初始化作为触发器, 传入dom元素或dom选择器或者元素集合
var clipboard = new ClipboardJS('.btn');
// 复制成功的回调
clipboard.on('success', function(e) {
    alert('复制成功')
    e.clearSelection();
});
// 报错回调
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
    alert('复制失败')
});
</script>

最后贴一下项目中的实现效果