Fork me on GitHub

浏览器实现粘贴板复制功能

发表于 | | 9

PC端项目很多都会用到复制到粘贴板的功能，但是由于浏览器的差异（IE/ff）和支持情况的而不同导致各种兼容

本来一直用的zeroClipboard插件，这个插件主要用了flash来实现，flash可以绕过浏览器不兼容的问题，兼容性还不错，但是依赖浏览器flash插件，有些用户可能会为了禁掉各种广告而禁掉flash插件，甚至FF浏览器本身就对flash插件进行了限制，导致有客户来问，所以研究了下相关内容；

这里介绍一套解决方案：clipBoard.js，这个插件纯js实现，主要原理是用到了document.execCommand('copy')方法，使用详解，这个方法可以鼠标选中的内容；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
简单的实现：
<input type="text" id="input1">
    <input type="button" Value="click" onclick="copy()">
    <script>
        function copy () {
            var input = document.createElement('input');
            input.value = document.getElementById('input1').value;
            input.style = "opacity:0"
            document.body.appendChild(input);
            input.select();
            document.execCommand('copy');
            console.log('Copy!');
            input.remove();
        }

    </script>

下面介绍一整套解决方案:

判断浏览器

因为clipboard兼容ie9以上，所以需要判断浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
//getClient为判断浏览器 方法地址：/resources/js/component.js
          var client = getClient();
          if(window.clipboardData){
            //for IE
            var copyBtn = document.getElementById("copy");
            copyBtn.onclick = function(){ 
            var text = $("#copy").attr("data-clipboard-text");
              window.clipboardData.setData('text',text); 
              alert("复制成功，地址为： " + text);
            }
          } else {
            if ((client.browser.firefox && client.browser.firefox > 41) || (client.browser.chrome && client.browser.chrome > 42) || (client.browser.ie && client.browser.ie > 8) || (client.browser.safari && client.browser.safari > 10) || (client.browser.opera && client.browser.opera > 29)) {
              //使用clipboard.js，非flash插件
              clip = new Clipboard('.mytemp-list-copy');

              clip.on('success', function(e) {
                Tatami.toast('复制成功,点击页面推广去设置');
                console.info('Action:', e.action);
                console.info('Text:', e.text);
                console.info('Trigger:', e.trigger);

                e.clearSelection();
              });

              clip.on('error', function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
              });
            } else {
              // 用ZeroClipboard插件 使用的flash
              clip = new ZeroClipboard($('.mytemp-list-copy'));
              clip.on('aftercopy', function () {
                Tatami.toast('复制成功,点击页面推广去设置');
              });
            }
          }

/**
 * [浏览器引擎、平台、Windows操作系统、移动设备和游戏系统检测]
 */
function getClient() {
    //呈现引擎
    var engine = {
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,

        //版本号
        ver: null
    };

    //浏览器
    var browser = {
        ie: 0,
        firefox: 0,
        opera: 0,
        safari: 0,
        chrome: 0,
        konq: 0,
        //版本号
        ver: null
    };

    //平台、设备和操作系统
    var system = {
        win: false,
        mac: false,

        //移动设备
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        winMobile: false,
        nokiaN: false,

        //游戏系统
        wii: false,
        ps: false
    }

    //检测浏览器和引擎
    var ua = navigator.userAgent;
    //优先检测opera浏览器
    if (window.opera) {
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit\/(\S+)/.test(ua)) {
        engine.ver = RegExp['$1'];
        engine.webkit = parseFloat(engine.ver);

        //判断是chrome还是safari
        if (/Chrome\/(\S+)/.test(ua)) {
            browser.ver = RegExp['$1'];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version\/(\S+)/.test(ua)) {
            browser.ver = RegExp['$1'];
            browser.safari = parseFloat(browser.ver);
        } else {
            //近似确定Safari版本号
            var safariVersion = 1;
            if (engine.webkit < 100) {
                safariVersion = 1;
            } else if (engine.webkit < 312) {
                safariVersion = 1.2;
            } else if (engine.webkit < 412) {
                safariVersion = 1.3;
            } else {
                safariVersion = 2;
            }

            browser.safari = browser.ver = safariVersion;
        }
    } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp['$1'];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
        engine.ver = RegExp['$1'];
        engine.gecko = parseFloat(engine.ver);

        //判断是否是firefox
        if (/Firefox\/(\S+)/.test(ua)) {
            browser.ver = RegExp['$1'];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp['$1'];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }

    //检测浏览器
    browser.ie = engine.ie;
    browser.opera = engine.opera;

    //检测平台
    var p = navigator.platform;
    system.win = p.indexOf('Win') === 0;
    system.mac = p.indexOf('Mac') === 0;
    system.x11 = (p == 'X11') || (p.indexOf('Linux') === 0);

    //检测windows操作系统
    if (system.win) {
        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
            if (RegExp['$1'] === 'NT') {
                switch (RegExp['$2']) {
                    case '5.0':
                        system.win = '2000';
                        break;
                    case '5.1':
                        system.win = 'xp';
                        break;
                    case '6.0':
                        system.win = 'Vista';
                        break;
                    case '6.1':
                        system.win = '7';
                        break;
                    default:
                        system.win = 'NT';
                        break;
                }
            } else if (RegExp['$1'] === '9x') {
                system.win = 'ME';
            } else {
                system.win = RegExp['$1'];
            }
        }
    }

    //检测移动设备
    system.iphone = ua.indexOf('iPhone') > -1;
    system.ipod = ua.indexOf('iPod') > -1;
    system.ipad = ua.indexOf('iPad') > -1;
    system.nokiaN = ua.indexOf('NokiaN') > -1;

    //windows mobile
    if (system.win === 'CE') {
        system.winMobile = system.win;
    } else if (system.win === 'Ph') {
        if (/Windows Phone OS (\d+.\d+)/.test(ua)) {
            system.win = 'Phone';
            system.winMobile = parseFloat(RegExp['$1']);
        }
    }

    //检测ios 版本
    if (system.mac && ua.indexOf('Mobile') > -1) {
        if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)) {
            system.ios = parseFloat(RegExp.$1.replace('_', '.'));
        } else {
            system.ios = 2; //猜测的， 并非真正检测出来
        }
    }

    //检测android 版本
    if (/Android(\d+\.\d+)/.test(ua)) {
        system.android = parseFloat(RegExp['$1']);
    }

    //游戏系统
    system.wii = ua.indexOf('Wii') > -1;
    system.ps = /playstation/i.test(ua);

    return {
        engine: engine,
        browser: browser,
        system: system
    }
};
坚持原创技术分享，您的支持将鼓励我继续创作！