一、如何单纯地通过前端实现复制剪切功能
先前因为项目需求,需要在前端实现一个点击触发复制剪切的功能,作为小白的我表示在这一块没接触过,头脑空白的我当时差点忘记了还有google这回事!······后来发现,方式还是挺多的:
- zeroClipBoard.js:需要结合一个叫ZeroClipboard.swf的flash插件一块用,这一个好像用的还是比较普遍的,网上也各种说能如何兼容IE等低版本浏览器。于是我尝试去用了,然后问题来了——特么却不兼容IE浏览器(高端的也是不行),然后又听说想要兼容IE(低版本),需要引用zeroclipboard的1.x版本,2的不行!于是换了github上1的版本(至于一点计几忘记了),但是还是不行,仔细检查过用法也正确,也尝试了网上各种兼容方案,就是不行
总之结局就是被搞得不要不要的,后来反思了下,是不是敲码的姿势问题,导致了这个rp问题
如果您曾经也遇到过,那么告诉我咯~
- clipboard.js与clipboard.swf:说到这个我就郁闷了,明明可以考纯clipboard.js实现复制(这也是本文重点要讲的),偏偏要靠一个clipboard.swf,用法中的参数也是一大堆,当时我就忽略了
- 好吧~主角出场了——clipboard.js!前端实现复制剪切功能,靠它一个就OK,逼格瞬间高了!然而···然而···理想很美好,显示很骨感——这个小插件仅仅支持到IE9+,又干回兼容的活了
还好还好···IE的window对象提供了clipboardData对象用于实现复制功能,怎么觉得这会IE这么么么哒了呢
二、重新封装clipboard实现完美兼容
封装过程
var ClipBoard = function(obj){
this.handle