纯clipboard.js实现复制(IE兼容至IE7)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/QiuDW_01/article/details/50451267

一、如何单纯地通过前端实现复制剪切功能

先前因为项目需求,需要在前端实现一个点击触发复制剪切的功能,作为小白的我表示在这一块没接触过,头脑空白的我当时差点忘记了还有google这回事!这里写图片描述······后来发现,方式还是挺多的:

  1. zeroClipBoard.js:需要结合一个叫ZeroClipboard.swf的flash插件一块用,这一个好像用的还是比较普遍的,网上也各种说能如何兼容IE等低版本浏览器。于是我尝试去用了,然后问题来了——特么却不兼容IE浏览器(高端的也是不行),然后又听说想要兼容IE(低版本),需要引用zeroclipboard的1.x版本,2的不行!于是换了github上1的版本(至于一点计几忘记了),但是还是不行,仔细检查过用法也正确,也尝试了网上各种兼容方案,就是不行这里写图片描述 总之结局就是被搞得不要不要的,后来反思了下,是不是敲码的姿势问题,导致了这个rp问题这里写图片描述 如果您曾经也遇到过,那么告诉我咯~
  2. clipboard.js与clipboard.swf:说到这个我就郁闷了,明明可以考纯clipboard.js实现复制(这也是本文重点要讲的),偏偏要靠一个clipboard.swf,用法中的参数也是一大堆,当时我就忽略了这里写图片描述
  3. 好吧~主角出场了——clipboard.js!前端实现复制剪切功能,靠它一个就OK,逼格瞬间高了!然而···然而···理想很美好,显示很骨感——这个小插件仅仅支持到IE9+,又干回兼容的活了这里写图片描述 还好还好···IE的window对象提供了clipboardData对象用于实现复制功能,怎么觉得这会IE这么么么哒了呢这里写图片描述

二、重新封装clipboard实现完美兼容

封装过程

var ClipBoard = function(obj){
    this.handlerID = obj.handlerID || null;
    this.textID = obj.textID || null;
    this.type = obj.type || 'copy';
    this.isAttr = obj.isAttr || false;
    this.isPlugin = true;
    this.isActive = false;

    var ua = window.navigator.userAgent;
    var is_IE = ua.match(/(rv:|msie )\d+/i);
    var IE_Version = is_IE ? parseInt(is_IE[0].split(/:| /g)[1]) : 9;
    if(IE_Version <= 8){
        this.isPlugin = false;
    }
    var handlerObj = document.getElementById(obj.handlerID);
    if(typeof this.type === 'string'){
        handlerObj.setAttribute('data-clipboard-action',this.type)
    }else{
        throw error('type类型错误!');
    }
    if(!obj.isAttr && obj.textID){
        handlerObj.setAttribute('data-clipboard-target','#'+obj.textID);
    }
}
ClipBoard.prototype.attach = function(){
    if(this.isActive){ // 对象已经被实例化
        return;
    }
    var tip = '复制';
    if(this.type === 'cut'){
        tip = '剪切';
    }
    this.isActive = true;
    if(this.isPlugin){
        var clip = new Clipboard('#'+this.handlerID);
        clip.on('success', function(e) {
            alert(tip+'成功,可通过Ctrl+V进行粘贴!');
        });
        clip.on('error', function(e) {
            alert(e.action+'操作失败!');
        });
    }else if(window.attachEvent){
        var self = this;
        var handlerObj = document.getElementById(this.handlerID);
        handlerObj.attachEvent('onclick',function(){
            var text = '';
            if(self.isAttr){// 复制属性值
                text = handlerObj.getAttribute('data-clipboard-text');
            }else{
                var textObj = document.getElementById(self.textID);
                text = textObj.value || textObj.innerHTML;
            }
            window.clipboardData.setData('Text',text);
            alert(tip+'成功,可通过Ctrl+V进行粘贴!');
        });
    }else{
            alert('浏览器版本过低,不支持该插件!')
    }
}

用法
首先引入clipboard.js以及上面那段代码,然后通过new的方式去实例化控件

// html
<p id="copy-p" class="a">将被复制的p文本</p>
<button id="copy-btn">复制</button>
<script src="/path/clipboard.js"></script>

// js
var c1 = new ClipBoard({
    handlerID: 'copy-btn',
    textID: 'copy-p',
    isAttr: false,
    type:'copy'
});
c1.attach(); // 触发复制/剪切功能

参数说明

  • handlerID:用于点击事件的控件,在html标签里面加上id这个属性;
  • textID:被复制文本所在的容器的id;
  • isAttr:用于说明复制的内容是否为控件中的属性值,默认为false(此时复制的内容是textID内的文本),如果设置为true,前提需要在控件这个标签上增添一个属性:data-clipboard-text,属性值就是你要复制的文本;eg: <button id="copy-btn" data-clipboard-text="这里是被复制的内容">复制</button>
  • type:操作的类型,取值为copy/cut(复制/剪切),默认是copy

效果图

chrome
这里写图片描述

这里写图片描述

IE8
这里写图片描述

这里写图片描述

三、结语

终于可以愉快地在前端实现复制功能了~~~

一直未明白为什么我使用zeroclipboard的时候不兼容ie,姿势不对,姿势不对·····这里写图片描述

展开阅读全文

没有更多推荐了,返回首页