Clipboard.js实现复制文本到剪贴板功能

 

2017年07月19日 11:11:00 阅读数：1508 标签： clipboard 更多

个人分类： JS

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/oucqsy/article/details/75350159

Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件，该插件可以将输入框，文本域，DOM节点元素中的文本内容复制到剪贴板中。

官网地址：https://clipboardjs.com/ 

浏览器兼容性：兼容Chrome、Firefox、Opera、Safari、IE9+

对于不兼容的浏览器版本也有优雅的降级处理，可以采用下面的方式

 

1. clipboard.on('error', function(e) {

2. alert('请选择手动复制!')

3. });

使用方法如下：

 

1、在页面引入clipboard.js

 

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

2、从元素内容复制文本

 

设置触发元素的data-clipboard-action属性，该属性的值为copy（复制）/cut（剪切）

设置data-clipboard-target属性，该属性值是要复制/剪切的目标元素的ID

 

1. <!--target-->

2. <span class="url" id="copyUrl">http://blog.youkuaiyun.com/oucqsy</span>

3. <!--trigger-->

4. <a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="copy" data-clipboard-target="#copyUrl">复制</a>

3、从元素属性复制文本

 

 

 <a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="http://blog.youkuaiyun.com/oucqs">复制</a>

4、执行JS事件

 

 

1. var clipboard = new Clipboard('#copyBtn');

2. clipboard.on('success', function(e) {

3. e.clearSelection();

4. console.log('success');

5. });

6. clipboard.on('error', function(e) {

7. console.log('error');

8. });