【原創】ZeroClipboard的時代或許已經過去了

曾經，一個網頁上要用Javascript實現網頁內容的復制，其實是很麻煩的一件事情。雖然在這個問題上IE有其高大上的 window.clipboardData 方法支持直接復制指定內容，Firefox也早早的支持了 document.execCommand 命令，但是因為早期的Chrome不支持瀏覽器直接操作剪貼板，或者說不支持 document.execCommand 命令，讓這一功能在兼容性上遇到了瓶頸。所以，聰明的開發者們開始走上“曲線救國”的道路：借助各大瀏覽器對Flash的支持，通過Javascript與Flash交互，將需要復制的內容傳遞到Flash中，再調用Flash操作剪切板的命令將內容復制到剪貼板，從而實現了兼容性極強的通過JS腳本復制網頁文本的插件。這也就是ZeroClipboard的使命。

The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.

ZeroClipboard曾盛極一時，而如今它的未來，恐怕令人擔憂。隨着HTML5的風靡，Flash在網頁應用中的地位受到了極大的沖擊，甚至有很多人都認為Flash正在慢慢淡出網頁開發者的世界，而事實也的確如此。不僅如此，自Chrome 43版本發布，增加 document.execCommand 命令支持，更讓ZeroClipboard的地位嚴重受到威脅。為什么這么說呢？下面我們一步一步來說明。

ZeroClipboard使用案例

通常情況下，ZeroClipord的應用場景大致是通過點擊一個按鈕復制一段指定的或用戶輸入的文本，HTML結構簡單的做如下描述：

<input type="text" name="" id="J_TextIn" value="Copy Test.">
<input type="button" value="Copy" id="J_DoCopy">
<script src="dist/ZeroClipboard.min.js"></script>

下面配上ZeroClipboard的方法綁定就大功告成了！

(function(){
    var btn = document.getElementById('J_DoCopy'),
        text = document.getElementById('J_TextIn'),
        zc = new ZeroClipboard(btn);
    zc.on('beforecopy', function(e){
        zc.setText(text.value);
    });
})();

我們預覽頁面，在文本框中輸入任意字符，點擊 Copy 按鈕，文本框中輸入的內容就被復制到剪貼板中了。我們可以在任意可寫區域使用 Ctrl+V 或鼠標右鍵將內容進行粘貼。該案例可完美兼容各主流瀏覽器，包括IE6/7/8等骨灰級瀏覽器。

現在不使用ZeroClipboard我們也能實現

首先，我們保證頁面結構不變，但不在引入ZeroClipboard插件：

<input type="text" name="" id="J_TextIn" value="Copy Test.">
<input type="button" value="Copy" id="J_DoCopy">

然后，我們使用 document.execCommamd 來對內容進行復制：

(function(){
    var btn = document.getElementById('J_DoCopy'),
        text = document.getElementById('J_TextIn');
    btn.onclick = function(){
        var transfer = document.getElementById('J_CopyTransfer');
        if (!transfer) {
            transfer = document.createElement('textarea');
            transfer.id = 'J_CopyTransfer';
            transfer.style.position = 'absolute';
            transfer.style.left = '-9999px';
            transfer.style.top = '-9999px';
            document.body.appendChild(transfer);
        }
        transfer.value = text.value;
        transfer.focus();
        transfer.select();
        document.execCommand('Copy', false, null);
    };
})();

接着，我們在瀏覽器中瀏覽，和使用ZeroClipboard時一樣的去操作，效果是一樣的。但是，這段代碼的正確執行是有限制的，因為 document.execCommand 在Chrome中支持的比較晚，所以要求Chrome版本必須是43及以后。

最后，再補充說明一下，使用 document.execCommand 來實現復制內容時，過渡被復制內容的 textarea 標簽（即：動態創建的那個textarea標簽），在復制可輸入區域（input:text,textarea）的內容時並不是必須的，可以直接簡化為：

(function(){
    var btn = document.getElementById('J_DoCopy'),
        text = document.getElementById('J_TextIn');
    btn.onclick = function(){
        text.focus();
        text.select();
        document.execCommand('Copy', false, null);
        text.blur();
    };
})();

考慮到實際使用中，我們可能需要復制一些非編輯區域提供的內容（比如：一個a標簽的鏈接地址等），所以增加了一個過渡的texearea，似乎更保險，更靈活一些。

此外，我再測試過程中，曾試圖將過渡的那個textarea設置為不可見的 visibility:hidden; ，卻發現復制功能失效了，所以這里需要注意一下...

作者博客：百碼山庄