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 相关文章推荐
JS 统计时间
Mar 09 Javascript
div层的移动及性能优化
Nov 16 Javascript
js自定义事件代码说明
Jan 31 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
js中的深浅拷贝问题简析
May 10 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显示MySQL数据的三种方法
2008/06/05 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
js实现数组转换成json
2015/06/26 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
Python中的数学运算操作符使用进阶
2016/06/20 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python代码注释规范代码实例解析
2020/08/14 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
网站设计师的岗位职责
2013/11/21 职场文书
标准化管理实施方案
2014/02/25 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
小学假期安全广播稿
2014/09/28 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python