JS实现复制内容到剪贴板功能


Posted in Javascript onFebruary 05, 2017

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大。下边介绍的是一个第三方插件库(ZeroClipboard.js)。

ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard

注意:此js库不支持兼容手机端(包括Android、IOS),仅支持PC端浏览器。

第一步:将插件库引入到工程中。

把Git上的dist目录copy到自己的目录中(其实只需要ZeroClipboard.js和ZeroClipboard.swf就OK~)

JS实现复制内容到剪贴板功能

脚本文件引入:

<script src="ZeroClipboard.js"></script>

第二步:初始化插件库。

var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
 moviePath: "ZeroClipboard.swf"
} );

第三步:上代码。

<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
</head>
<body>
<!-- 
 说明:
 1.data-clipboard-target 输入要复制的对象的ID
-->
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>复制到剪贴板</b></button>
<br/>
<textarea id="fe_text" cols="50" rows="3">输入需要复制的内容</textarea>
</body>
</html>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
//初始化复制对象
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
 moviePath: "ZeroClipboard.swf"
} );
//复制内容到剪贴板成功后的操作
clip.on( 'complete', function(client, args) {
 alert("复制成功,复制内容为:"+ args.text);
} );
</script>

以上示例代码注释中已经对Zero Clipboard的功能进行了介绍,需要了解更多的功能请到https://github.com/zeroclipboard/ZeroClipboard

注意:运行环境必须在服务器环境下,否则看不到效果!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 #Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 #Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 #Javascript
thinkjs之页面跳转同步异步操作
Feb 05 #Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 #Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 #Javascript
js仿小米手机上下滑动效果
Feb 05 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
js实现倒计时关键代码
2017/05/05 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JS验证码实现代码
2017/09/14 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python退火算法在高次方程的应用
2018/07/26 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
物流专业大学应届生求职信
2013/11/03 职场文书
会计专业求职信范文
2014/03/16 职场文书
公司节能减排倡议书
2014/05/14 职场文书
锦旗标语大全
2014/06/23 职场文书
个人合伙协议书范本
2014/10/14 职场文书
小学校本教研总结
2015/08/13 职场文书