纯clipboard.js实现复制（IE兼容至IE7）

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

先前因为项目需求，需要在前端实现一个点击触发复制剪切的功能，作为小白的我表示在这一块没接触过，头脑空白的我当时差点忘记了还有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，姿势不对，姿势不对·····

 

 

原文地址：https://blog.csdn.net/QiuDW_01/article/details/50451267