一起学习网 一起学习网


JS 使用clipboard.js实现页面内容复制到剪贴板

前端 JS 使用clipboard.js实现页面内容复制到剪贴板,一起学习网, 学习交流平台, 在线学习, 学习资源, 教育平台, 学习社区, 学生论坛, 学习工具, 学习技巧, 学习经验 09-06

clipboard.js是一个github上的开源项目,可以实现纯 Javascript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

1、访问clipboard.js项目主页——https://github.com/zenorocha/clipboard.js

2、下载clipboard.min.js,并在页面中引用 copy

  1. <!-- clipboard Script -->  

  2.         <script type="text/javascript" src="script/clipboard.min.js"></script>  




3、在script中写实例化语句:

  1. <script type="text/javascript">  

  2.         $(document).ready(function(){  

  3.             var clipboard = new Clipboard('.btn');  

  4. }  

  5. </script>  


4、写页面按钮,实现点击按钮复制指定内容 copy

  1. <button class="btn" data-clipboard-text="http://www.hbcloudwide.com/oss/video/7">点击复制</button>  

当然,clipboard.js还可以实现多种复制或剪切效果。具体用法参看github项目主页即可。




编辑:一起学习网