zeroclipboard 单个复制按钮和多个复制按钮的实现方法
作者:mdxy-dxy 时间:2024-04-22 13:02:59
zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活。
zeroclipboard下载地址:https://www.jb51.net/jiaoben/24961.html
zeroclipboard实现多浏览器复制到粘贴板功能(单个复制按钮和多个复制按钮) 为了更好的用户体验,现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复制到粘贴板了;
出于兼容性的考虑,基本上都是通过zeroclipboard来实现.首先要下载zeroclipboard,解压后把ZeroClipboard.js和ZeroClipboard.swf、ZeroClipboard10.swf(“为了flash10”)放到项目中,可以通过ZeroClipboard.setMoviePath( '/ZeroClipboard.swf' )方法来加载swf;
下面是整理的代码(也是通过 网上查找整理的)
(单个复制按钮):
html:
<input type="text" value="text" id="copy_txt"/><a href="javascirpt:;" id="copy_btn">复制</a>
<script language="JavaScript">
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
var clip = new ZeroClipboard.Client(); //创建新的Zero Clipboard对象
clip.setText( '' ); // will be set later on mouseDown //清空剪贴板
clip.setHandCursor( true ); //设置鼠标移到复制框时的形状
clip.setCSSEffects( true ); //启用css
clip.addEventListener( 'complete', function(client, text) { //复制完成后的监听事件
alert("aa")
clip.hide(); // 复制一次后,hide()使复制按钮失效,防止重复计算使用次数
} );
clip.addEventListener( 'mouseDown', function(client) {
clip.setText( document.getElementById('copy_txt').value );
} );
clip.glue( 'copy_btn' );
</script>
多个复制按钮:
<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn">复制</a>
<script language="JavaScript">
$(".copyBtn").each(function(i){
var id = $(this).attr('data');
var clip=null;
clip = new ZeroClipboard.Client();
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
clip.setHandCursor( true );
clip.setText( $("#copy_txt"+id).val() );
clip.addEventListener('complete', function (client, text) {
alert( "恭喜复制成功" );
});
clip.glue( 'copy_btn'+id);
});
</script>
注意: clip.setText( $("#copy_txt"+id).val() );如果是获取div中的内容, 一般用clip.setText( $("#copy_txt"+id).text() );或clip.setText( $("#copy_txt"+id).html() );
标签:zeroclipboard,单个复制,多个复制
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
用Python编写生成树状结构的文件目录的脚本的教程
2022-12-26 09:54:52
Python面向对象总结及类与正则表达式详解
2021-08-12 13:23:34
![](https://img.aspxhome.com/file/2023/3/70023_0s.png)
利用python调用摄像头的实例分析
2022-01-03 22:10:14
python 删除指定时间间隔之前的文件实例
2023-07-19 17:58:38
浅谈解决360兼容模式浏览器的方法
2023-09-17 01:11:39
解决Jupyter Notebook使用parser.parse_args出现错误问题
2023-05-09 17:41:42
python实现两个经纬度点之间的距离和方位角的方法
2022-03-15 02:41:27
三十分钟MySQL快速入门(图解)
2024-01-21 21:49:32
![](https://img.aspxhome.com/file/2023/5/80015_0s.png)
Python第三方模块apscheduler安装和基本使用
2021-02-26 06:55:07
![](https://img.aspxhome.com/file/2023/9/128729_0s.png)
php中实现记住密码自动登录的代码
2023-11-14 18:36:14
python 统计代码行数简单实例
2022-05-08 21:04:34
vue-cli脚手架引入弹出层layer插件的几种方法
2023-07-02 17:04:29
Mootools 1.2教程(21)——类(二)
2008-12-28 20:58:00
如何使用Python控制摄像头录制视频
2021-01-24 10:10:29
![](https://img.aspxhome.com/file/2023/3/105903_0s.gif)
语言编程花絮内建构建顺序示例详解
2023-11-04 09:42:12
python基础教程之while循环
2021-02-05 03:02:17
![](https://img.aspxhome.com/file/2023/9/118309_0s.png)
使用Docker制作Python环境连接Oracle镜像
2021-02-21 23:42:47
![](https://img.aspxhome.com/file/2023/4/135444_0s.jpg)
教你用pyecharts绘制各种图表案例(效果+代码)
2021-07-30 21:56:54
![](https://img.aspxhome.com/file/2023/8/94168_0s.png)
MySQL 5.7及8.0版本数据库的root密码遗忘的解决方法
2024-01-19 01:40:37
python通过pillow识别动态验证码的示例代码
2023-08-27 02:29:21
![](https://img.aspxhome.com/file/2023/5/62295_0s.png)