JS基于clipBoard.js插件实现剪切、复制、粘贴


Posted in Javascript onMay 03, 2016

摘要:

最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,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 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
搞定immutable.js详细说明
May 02 #Javascript
Immutable 在 JavaScript 中的应用
May 02 #Javascript
基于javascript数组实现图片轮播
May 02 #Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 #Javascript
bootstrap3 兼容IE8浏览器!
May 02 #Javascript
javascript实现列表切换效果
May 02 #Javascript
基于javascript编写简单日历
May 02 #Javascript
You might like
php魔术变量用法实例详解
2014/11/13 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
从python读取sql的实例方法
2020/07/21 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
南威尔士家居商店:Leekes
2016/10/25 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
教育局长自荐信范文
2013/12/22 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
商务考察邀请函范文
2014/01/21 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
小学班主任自我评价
2015/03/11 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
整理Python中常用的conda命令操作
2021/06/15 Python
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL