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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
JavaScript函数、方法、对象代码
Oct 29 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 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
php读取纯真ip数据库使用示例
2014/01/26 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
浅析Python函数式编程
2018/10/06 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
中文专业毕业生自荐信
2013/10/28 职场文书
运动会通讯稿150字
2014/02/15 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
社区活动总结范文
2015/05/07 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
Redis主从复制操作和配置详情
2022/09/23 Redis