最近换了工作,一直比较忙,很久没写博客了,忙的时候也很少折腾东西。这两天有点闲了,想想前两天产品经理让做的一个点击复制一段文字的功能没有完全开发出来,今天折腾了一下,给做出来了,下面把教程写出。
刚开始产品经理要这个功能的时候比较忙,匆匆忙忙找了个input框的点击复制。具体代码如下:
[cce_html]
<input type="text" value="这里是要复制的内容" disabled="" id="content">
<button type="button" id="copy">复制</button>
<!-- 此处需引用jquery库!!! -->
<script>
$("#copy").onclick(function(){
var e=$("#content");//对象是content
e.select(); //选择对象
document.execCommand("Copy"); //执行浏览器复制命令
alert("复制成功");
});
</script>
[/cce_html]
这个直接用jquery就可以实现功能。但此种写法有个缺点就是input框的type必须是text,这样的话用户就可以在里面填写内容了。

而如果加上disabled或者直接hidden的话,那这个功能就不能用了,因为这个功能是选中input框内的文字,然后调用浏览器的复制功能复制到剪切板中,所以一旦disabled或hidden这个功能就不能用了,和产品经理的要求不符合。不过由于当时有其他要紧的任务,这个功能虽然不完美但还是将就着先用着。

今天闲来无事,想想这个功能还没有完善,于是就上网再次搜索一下,结果出现的还是老样子,要么是不能用,要么就是input方法,还有一种是用了Zero Clipboard插件,这个是用了flash方法,需要再加一个swf文件,并且使用麻烦,就放弃了。网上的教程博客千篇一律。根本没有经过测试,好多根本就不能用,感觉很无奈,但最终功夫不负有心人,还是找到一个能用的,并且方法比较简单。下面先把代码附上。
[cce_html]
<!-- 编写html,div内部为要copy的内容,id为content -->
<div id='content'>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#content">Copy</button>

<!-- 引入js框架文件 -->
<script src="dist/clipboard.min.js"></script>

<!-- js代码 -->
<script>
  var clipboard = new Clipboard('.btn');

  clipboard.on('success', function(e) {
  console.log(e);
  });

  clipboard.on('error', function(e) {
  console.log(e);
  });
</script>
[/cce_html]

插件官网地址:https://clipboardjs.com/

插件github地址:https://github.com/zenorocha/clipboard.js

下载官方插件,只需引入压缩文件中的dist文件夹下clipboard.min.js文件即可,就像官网所说的:

clipboard.js