純 轉載複製，非原創

原地址：http://www.cnblogs.com/xhyu/p/5370111.html

概況：

  ZeroClipboard 就是常說的Flash法，通過載入一個Flash，讓其訪問系統剪貼簿來繞過絕大多數系統的許可權限制，然而體積稍微龐大些

  Clipboard.js 近幾年使用較多，體積相對小，相容性可以接受，使用還比較方便。

  execCommand 新興勢力，safari等主流正在努力相容，是個好東西。

  setData 太老。。一般不太用，基本只適合IE

相容性：

  ZeroClipboard 相容性最好，能全面相容chrome/ FireFox/ IE/ 甚至Safari 這種“友好”的瀏覽器

  Clipboard.js和execCommand相容性相似，相容chrome/ FF/ IE>9/ Safari新版（不太懂Safari版本號如何算。。感覺15年以後的都可以）

  setData 僅IE

體積：

  ZeroClipboard 外掛較大，230KB

  Clipboard.js 較小，4KB

  execCommand是document方法，不用外掛直接搞

雖說體積有差，載入起來速度差不多的其實。。話說git好像就是用的ZeroClipboard

Clipboard.js 實驗經過：

  直接忽略胖胖的Flash法，，先盯上的Clipboard.js，用起來著實簡單，先引用壓縮版：

<script src="dist/clipboard.min.js"></script>

新建Clipboard物件（順便：'.btn'給所有class="btn"的元素都加了監聽，其他用法可查JS）

var clipboard = new Clipboard('.btn');

//可以自己加些處理
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});
clipboard.on(
 
'error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

HTML裡這樣就OK了

<button class="btn" data-clipboard-target="#foo">

使用清爽，測試通過，然而專案只有一個地方用到copy，為了他加個外掛真是不優美。。於是終於找到了近期出現的execCommand()大法 （生在了好時代Orz）

execCommand()大法：

  其實只需要選中要複製的內容，執行document.execCommand('copy', false, null)就好了。execCommand裡可以跑很多例如paste等方法，第一個引數是方法名，第二個是是否展示預設ui，第三個是可選引數列表，對copy來說後兩個都用不到。

  根據相容不同，執行後可能的情況（涉及返回值）：

    1.不支援execCommand：丟擲異常          2.不支援copy方法：返回false                    3.成功：true

  因此框架可以這樣寫：

copy_target.focus();
copy_target.select();
try{
    if(document.execCommand('copy', false, null)){
        //success info
    } else{
        //fail info
    }
} catch(err){
    //fail info
}

  給使用者的反饋用的jquery的tooltip，然後寫成一個function就是如下：

function copy(copytargetid,copybtnid){
    var cpt = document.getElementById(copytargetid);
    var cpb = document.getElementById(copybtnid);
    $(cpt).focus();
    $(cpt).select();
    try{
        if(document.execCommand('copy', false, null)){
            $(cpb).tooltip({title:"copied!", placement: "bottom", trigger: "manual"});
            $(cpb).tooltip('show');
            cpb.onmouseout=function(){$(cpb).tooltip('destroy')};
        } else{
            $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"});
            $(cpb).tooltip('show');
            cpb.onmouseout=function(){$(cpb).tooltip('destroy')};
        }
    } catch(err){
        $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"});
        $(cpb).tooltip('show');
        cpb.onmouseout=function(){$(cpb).tooltip('destroy')};
    }
}

用的時候直接

<button id="cpbtn" onclick="copy('cptar', 'cpbtn')">copy</button>

即可

到此還沒有結束。。。

專案用的vue，於是需要做成vue的method，又是用coffee寫的，改了下語法，在初次渲染的html中測試通過了，然後。。。我的copy妞是個vex模態框。。button是寫在vex.dialog.open的message裡的，message是個字串，彈窗時候強注一段html。而且vue函式是隻在渲染階段繫結，所以。。。初次vue渲染的時候不會識別到字串中的v-on:click，無法繫結。。於是不能從button元素直接調。

決定搞一個隱藏input中繼一下，最後終於用比較優美的姿勢實現了。。。（上次是直接在message裡強行注入script。。。涉及script巢狀還加了個轉義<\/script>，結果醜的一bi。。）

button裡 onclick="document.getElementById('copyrelay').select()"，input裡@select('copy(...)')（@是vue的v-on:的縮寫）。

終於測試一切完好，天真的以為加個display: none就大功告成。。結果發現跪了

原來是display:none的元素並不能被select。。

同樣的，也不能focus, change等等，於是順著onerror等事件挨個試了一遍。。發現貌似只有onclick work。。。

另外還順帶試了一下，<input type="hidden"/>也是不能用那些事件；即使正常顯示元素，value=""的話也不能觸發select。

當然，至於是.select()沒有成功，還是元素沒有觸發select事件，還是沒有觸發v-on:select，有待確定，有時間可以試一下。

Anyway，最終程式碼：

<input id="copyrelay" style="display: none;" @click=“copy('cptg','cpbt')”/>

<!--vex.dialog.open的message中：-->
<input id="cpbt" type="button" onclick="document.getElementById('copyrelay').click()"/>
<input id="cptg" value="copy test" readonly/>

method中的copy函式如上所提，轉為coffee。

我這個偽frontend太弱了。。還是希望給貴司多搞點貢獻。。。

感謝lrx，lyy，P8，zzl，xxm犇們Orz。。。

就這樣。