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

可是想写好一篇博客好像不是那么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 ，将这两个文件放入到你的项目中。

下载下来后里面有个小样例。例如以下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Zero Clipboard Test</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <!--
  9. 	说明：
  10. 	1.data-clipboard-target 输入要复制的对象的ID
  11. -->
  12. <button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>拷贝到剪贴板</b></button>
  13. <br/>
  14. <textarea id="fe_text" cols="50" rows="3">输入须要复制的内容</textarea>
  15. </body>
  16. </html>
  17. <script type="text/javascript" src="ZeroClipboard.js"></script>
  18. <script type="text/javascript">
  19. // 定义一个新的复制对象
  20. var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
  21.   moviePath: "ZeroClipboard.swf"
  22. } );
  23.  
  24. // 复制内容到剪贴板成功后的操作
  25. clip.on( 'complete', function(client, args) {
  26.    alert("复制成功，复制内容为："+ args.text);
  27. } );
  28.  
  29. </script>

效果例如以下图：

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

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

效果例如以下图：

代码例如以下：

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

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

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

样式是例如以下引入的：

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

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

JS 点击复制Copy插件--Zero Clipboard的更多相关文章

  1. JS 点击复制Copy (share)

    分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...

  2. JS 点击复制Copy

    1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...

  3. js实现点击复制网页内容（基于clipboard.js）

    浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...

  4. JS 点击复制按钮 将文字复制到手机剪贴板

    我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...

  5. JS点击复制

    <!DOCTYPE html><html><head> <script type="text/javascript"> functi ...

  6. js 点击复制内容

    <textarea id="pushUrlsTxt" rows="5" cols="55"></textarea> ...

  7. JS 点击复制

    一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入 ...

  8. js点击复制剪贴板

    代码用原生写的.工作中用的angular,所以如果有用angular的话,请把js代码copyToClipboard函数中的document.getElementById(elementId).inn ...

  9. js 点击复制文字

    复制input里面的文字 html: <input id="content" class="form-control" type="text&q ...

随机推荐

  1. core_cm3文件函数一览

    core_cm3是ARM公司推出来的统一规定,这是对下游芯片厂商的统一规定,因此可以再Cortex-M3(CM3)之间进行移植.此文件中定义了一些对特殊功能寄存器的C语言形式的操作,本质上是内敛汇编和 ...

  2. c++ 11 多线程教学(1)

    本篇教学代码可在GitHub获得:https://github.com/sol-prog/threads. 在之前的教学中,我展示了一些最新进的C++11语言内容: 1. 正则表达式(http://s ...

  3. flush();close();dispose()

    写一个写csv文件的程序,用streamwriter,觉得程序主体是没有问题的,但是一直写不进去,最后发现是因为没有调用flush(). msdn 对streamwriter.flush()的的说明是 ...

  4. alt和title的用法区别

    经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...

  5. compass模块----Utilities----Sprites精灵图合图

    css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是 ...

  6. css3标签

    -moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表chrome.safari私有属性 -o代表opera私有属性 border-radius:2em; 向div ...

  7. 需求管理（REQM,Requirements Management）工具（转）

    需求管理(REQM,Requirements Management)属于成熟度2级(受管理级)的过程域,是其他许多过程域实施的前提.对于暂未实施CMMI的企业,同样也可以借鉴CMMI的原则,实施和优化 ...

  8. 路由转发(curl)

    <?php ini_set('memory_limit', '640M'); ini_set('default_charset', 'utf-8'); define('webroot', 'ht ...

  9. Array.prototype.sort()

    sort() 方法对数组的元素做原地的排序,并返回这个数组.默认按照字符串的Unicode码位点(code point)排序. 语法 arr.sort([compareFunction]) 参数 co ...

  10. CSS的权重（转）

    CSS写的渐渐多了,他的权重问题就不得不昂首面对,之前一直得过且过的将就用着,直到最近遇到了几个大坑,一直割刺着我对前端的热情,得了得了,蒙不过去了,就发点时间记下来吧,当然还是一片转载的文章,有时候 ...