JS 点击复制Copy插件–Zero Clipboard

JS 点击复制Copy插件–Zero Clipboard

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

写博客就是一周工作中遇到哪些问题,一个优点就是能够进行一个总结,另外一个优点就是下次遇到相同的问题即使那你记不住,也能够翻看你的博客攻克了。相同也能够帮到别人遇到与你一样问题的人。或者别人有比你更好的解决的方法,能够一起讨论,分析出更好的解决方法。所以这是个好习惯。既然是好习惯,那就得坚持。


可是想写好一篇博客好像不是那么easy的,由于你得有问题,不然你写什么,手放在键盘上不知道敲啥。或者是你自动学习了,对你的学习进行了总结。然后你得有得写。

这周公司同事分享的《贝叶斯方法》对我的感触挺大的。好像对我的见识一下拓宽了。里面涉及到的统计学,心理学等等非常多学科,然后 我总结了自己,学东西好像都学到的是皮毛。没有深入进去。贝叶斯算法还没全然理清,在网上看了一些资料,仅仅能说略懂。当然这么好的东西一下子没弄懂,那我就多花点时间呗。可是在没全然弄懂之前,让我写一篇关于贝叶斯方法的博客我想对于我来说是有一定难度的。我试着去理解,还拿PPT给我女朋友大概讲了一遍,方便自己增强记忆。她貌似是懂了。她一直觉得自己智商比我高。好吧,扯远了。


这周还是写一个工作中遇到的问题吧。

问题例如以下:

表格里面有非常多列,每一列的URL我都得复制。点复制则复制当前列的URL;

网上找了非常多方法。发现尽管功能能够实现,但浏览器兼容性不行。

然后想到去找js插件,找到了一款各个浏览器都兼容得不错的JS复制插件 Zero Clipboard 

Zero Clipboard 的实现原理 

Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方式,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 仅仅同意在 Flash 上进行操作才干启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在button之上,这样事实上点击的不是button而是 Flash ,也就能够使用 Flash 的复制功能了。 

怎样使用 Zero Clipboard 

首先下载Zero Clipboard,并解压缩。当中须要两个文件:ZeroClipboard.js 和 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>

效果例如以下图:

JS 点击复制Copy插件--Zero Clipboard

然后在你须要的地方CTRL+V就能够粘贴了。

然后把功能用到实际项目中,

效果例如以下图:

JS 点击复制Copy插件--Zero Clipboard

代码例如以下:

在TR中要复制的内容中的TD标签里面加:

注明:$i是循环数据出来的。循环一次,$i++;

 <td id='fe_text<?php echo $i; ?>'>

JS 点击复制Copy插件--Zero Clipboard

样式是例如以下引入的:

<script type="text/javascript" src="/misc/js/ZeroClipboard.js"></script>
<script type="text/javascript">
	<?php for($r=0;$r<$i;$r++): ?>
	var clip = new ZeroClipboard( document.getElementById("d_clip_button<?php echo ($r+1); ?>"), {
	  moviePath: "/misc/js/ZeroClipboard.swf"
	} );
	clip.on( 'complete', function(client, args) {
	   alert("复制成功,复制内容为:"+ args.text);
	} );
	<?php endfor; ?>
</script>

最后,就OK了,測试了几个浏览器功能都是OK的。


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/118735.html原文链接:https://javaforall.net

(0)
上一篇 2021年12月1日 下午11:00
下一篇 2021年12月2日 上午6:00


相关推荐

  • SuperAgent使用文档

    SuperAgent使用文档SuperAgent 最近在写爬虫 看了下 node 里面有啥关于 ajax 的模块 发现 superagent 这个模块灰常的好用 好东西要和大家分享 话不多说 开始吧 什么是 SuperAgentsu 它是一个强大并且可读性很好的轻量级 ajaxAPI 是一个关于 HTTP 方面的一个库 而且它可以将链式写法玩的出神入化 varsuperagen require

    2026年3月18日
    2
  • 国产FPGA市场格局及进展

    国产FPGA市场格局及进展国产 FPGA 市场格局及进展时间 2018 05 2611 25 来源 电子技术应用网摘要 FPGA 作为通信 航天 军工等领域的关键核心器件 是保障国家战略安全的重要支撑基础 近年来 随着大数据 云计算和人工智能的发展 FPGA 的应用领域得到快速扩张 FPGA 作为通信 航天 军工等领域的关键核心器件 是保障国家战略安全的重要支撑基础 近年来 随着大数据 云计算和人工智能的发展 FPGA 的

    2026年3月26日
    2
  • windows批处理脚本_批处理打开文件命令

    windows批处理脚本_批处理打开文件命令 Windows平台批处理命令教程 do2jiang@gmail.com蒋冬冬 收集于网络 2009.4  该教程一共分为4大部分,第一部分是批处理的专用命令,第二部分是特殊的符号与批处理,第三部分是批处理与变量,第四部分是完整案例。 第一部分:批处理的专用命令 批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩

    2022年8月22日
    12
  • 计算机ei期刊最新版2018,2018年EI收录中文期刊目录

    计算机ei期刊最新版2018,2018年EI收录中文期刊目录2018 年 EI 收录中文期刊目录 由会员分享 可在线阅读 更多相关 2018 年 EI 收录中文期刊目录 6 页珍藏版 请在人人文库网上搜索 1 2018 年 EI 收录中文期刊目录 Elsevier 官网于 2018 年 1 月 1 日更新了 EICompendex 目录 共收录中文期刊 158 种 其中新增期刊 5 种 序号中文刊名收录情况 1 声学学报保持收录 2 航空学报保持收录 3 兵工学报保持收录 4 自动化学报保持收录 5 电子学报保持收录

    2026年3月20日
    5
  • coze平台AI Agent开发入门之超详细的图文教程

    coze平台AI Agent开发入门之超详细的图文教程

    2026年3月12日
    1
  • spi时序图怎么分析,怎么看懂spi时序图

    spi时序图怎么分析,怎么看懂spi时序图我做产品的时候 最怕就是做 IIC 和 SPI 的通信 这两种协议时序哪怕是延时时间有误差 都有可能导致通信不上 出现问题的时候 如果没设备也很难排查问题到底出在哪里 有时候这个产品写好的时序程序 换一个单片机用同一个程序移植过去就不行了 而且很多公司都没有设备可以调试这些协议 大多数时候都是完全靠蒙 今天就拿新手比较头痛的 SPI 来进行时序图的分析和讲解 看不懂你打我 我记得第一次 SPI 通讯的时候 完全是照抄网络上的程序 因为芯片手册的时序图看起来太可怕了 根本看不懂

    2026年3月18日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号