2017年07月19日 11:11:00 阅读数:1508 标签: clipboard 更多
个人分类: JS
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/oucqsy/article/details/75350159
Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件,该插件可以将输入框,文本域,DOM节点元素中的文本内容复制到剪贴板中。
浏览器兼容性:兼容Chrome、Firefox、Opera、Safari、IE9+
对于不兼容的浏览器版本也有优雅的降级处理,可以采用下面的方式
-
clipboard.on('error', function(e) {
-
alert('请选择手动复制!')
-
});
使用方法如下:
1、在页面引入clipboard.js
<script type="text/javascript" src="js/clipboard.min.js"></script>
2、从元素内容复制文本
设置触发元素的data-clipboard-action属性,该属性的值为copy(复制)/cut(剪切)
设置data-clipboard-target属性,该属性值是要复制/剪切的目标元素的ID
-
<!--target-->
-
<span class="url" id="copyUrl">http://blog.csdn.net/oucqsy</span>
-
<!--trigger-->
-
<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.csdn.net/oucqs">复制</a>
4、执行JS事件
-
var clipboard = new Clipboard('#copyBtn');
-
clipboard.on('success', function(e) {
-
e.clearSelection();
-
console.log('success');
-
});
-
clipboard.on('error', function(e) {
-
console.log('error');
-
});