JS基于clipBoard.js插件实现剪切、复制、粘贴
更新时间：2016年05月03日 09:57:13 作者：夕阳白雪
这篇文章主要介绍了JS实现剪切、复制、粘贴——clipBoard.js 的相关资料,需要的朋友可以参考下
摘要：
最近做了一个项目，其中有这样一需求：实现一个点击按钮复制链接的功能，通过网上找相关资料，找到了几个插件，ZeroClipboard是通过flash实现的复制功能，随着越来越多的提议废除flash，于是就想能不能通过js来实现复制剪切呢？
地址：https://github.com/baixuexiyang/clipBoard.js
方法：
复制
var copy = new clipBoard(document.getElementById('data'), {
beforeCopy: function() {
},
copy: function() {
return document.getElementById('data').value;
},
afterCopy: function() {
}
});
剪切
var cut = new clipBoard(document.getElementById('data'), {
beforeCut: function() {
},
Cut: function() {
return document.getElementById('data').value;
},
afterCut: function() {
}
});
粘贴
var paste = new clipBoard(document.getElementById('data'), {
beforePaste: function() {
},
paste: function() {
return document.getElementById('data').value;
},
afterPaste: function() {
}
});
补充
1.引入clipboard.min.js文件
2.定义一个button按钮，注意按钮的属性：data-clipboard-action="copy" 表示是复制行为，data-clipboard-text=‘XXX'，XXX表示你要复制的内容
3.书写js,建立clipboard对象以及复制后执行的方法
演示代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
</head>
<body>
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
<button class="btn" data-clipboard-text="ean you should — clipboard.js">
Copy to clipboard2
</button>
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert('复制成功，您复制的链接为'+e.text);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
alert('复制失败')
});
</script>
</body>
</html>
最近在做项目的时候需要实现复制黏贴的功能，但是js自己提供的各种方法存在兼容性问题，最后决定使用插件来实现，找了很多插件，发现了了一款比较好用的，分享给大家
相关文章
本文给大家详细分析了javascript中的6种变量类型，通过示例做了详细的解释，十分的实用，对于大家熟练掌握变量类型非常有帮助，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要为大家详细介绍了原生js实现3D轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
JavaScript代码在web应用程序中经常用到，但是很多开发者忽视了一些性能方面的知识，如何编写高性能javascript代码呢？接下来，小编跟大家一起学习2015-10-10
这篇文章主要介绍了js实现类似菜单风格的TAB选项卡效果代码,通过javascript鼠标事件及页面元素遍历实现tab切换的功能,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了后台获取ZTREE选中节点的方法,实例分析了ZTREE中getZTreeObj方法与getCheckedNodes方法的使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要为大家介绍了TypeScript类型系统自定义数据类型教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
所谓骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容,这篇文章主要给大家介绍了关于微信小程序骨架屏的应用与实现的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了js创建对象的方法，js一个有三种方法创建对象，这里为大家做一个总结，感兴趣的小伙伴们可以参考一下2016-01-01
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
如何在js中让函数睡眠多少秒? 经常会有Javascript初学者提出这样的问题,自从js出现以来.2010-08-08
这篇文章介绍了使用js复制链接中的部分文字的方法，技巧很实用，需要的朋友可以参考下2015-07-07
最新评论