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

前言

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

几种实现

1. jQuery库的jQuery-zclip.
   需要依赖jQuery和基于jQuery的zclip,让人不能接受的是其实现需要依赖flash,在这个主流浏览器都禁用flash的时代,不得不说这个插件兼容性几乎为0.
   因为应用性太低,这里就不贴实现代码了,感兴趣的同学可以自己搜一下.
2. 原生js
   浏览器提供了copy命令 ，可以复制选中的内容document.execCommand("copy")。如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用copy 命令，将文本复制到剪切板，但是 select() 方法只对 和 </code> 有效，如果需要对其他元素进行复制，可以考虑在页面添加一个隐藏的textarea，同步下两个元素的值即可。</li> </ol> <ul> <li><p>优点:<br> 原生js,不依赖第三方插件</p></li> <li><p>缺点:<br> mac下不兼容</p></li> <li><p>实现:</p></li> </ul> <pre><code class="html"><!-- 文本所在的代码块 --> <div id='textDiv' >text you want to copy</div> <!-- 隐藏的文本域用来同步选中需要复制的文本 --> <textarea id='textArea' style='display: none'>
   3. clipboard.js git主页
   • 优点, 主页已经讲得很明白:
   1. No Falsh 不依赖flash
   2. No Framework 不依赖框架
   3. Just 3kb gzipped 压缩后只有3k
   • 安装:
     我这里是用到老项目中,所以直接clone了一份源码,把其中的clipboard.min.js 拿到项目中,页面中添加依赖
     
   • 使用:

   
   
   
   
   
       复制
   
   
   
   
   
   

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