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 nodeType 属性全面解析
Nov 14 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
Python 深入理解yield
2008/09/06 Python
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
django中模板的html自动转意方法
2018/05/27 Python
python和c语言的主要区别总结
2019/07/07 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
大学毕业感言50字
2014/02/07 职场文书
高中运动会入场词
2014/02/14 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
python实现大文本文件分割成多个小文件
2021/04/20 Python