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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
搞定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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python下10个简单实例代码
2017/11/15 Python
python基础教程项目二之画幅好画
2018/04/02 Python
numpy中矩阵合并的实例
2018/06/15 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python生成n个元素的全组合方法
2018/11/13 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
建筑公司文秘岗位职责
2013/11/29 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
七年级政治教学反思
2014/02/03 职场文书
岗位廉政承诺书
2014/03/27 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
责任书范本
2014/08/25 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
银行员工考核评语
2014/12/31 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL