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学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
动态加载js的方法汇总
Feb 13 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
jquery实现聊天机器人
Feb 08 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
JS实现页面侧边栏效果探究
Jan 08 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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新手上路(十二)
2006/10/09 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP反射API示例分享
2016/10/08 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
简单学习vue指令directive
2016/11/03 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
浅析python内置模块collections
2019/11/15 Python
python安装sklearn模块的方法详解
2020/11/28 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
2014年技术部工作总结
2014/12/12 职场文书
国庆节慰问信
2015/02/15 职场文书
小学生学习保证书
2015/02/26 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书