JAVASCRIPT複製到剪貼板

來源：個人博客

最近答應張先生替 42qu 寫一個短址服務，寫的過程當中學到若干新東西，JS操做剪貼板即是其中一例。

Javascript自己固然提供了操做剪貼板的接口，通常長得像

function copyToClipboard(text)
{
    if (window.clipboardData) // IE
    {  
        window.clipboardData.setData("Text", text);
    }
    else
    {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

可是，因爲各家對於安全這一字眼的認知存在差別，所以，這些既存接口用起來須要勇氣——破罐子破摔的勇氣。

因而，我瀏覽了 StackOverFlow上的討論 ，其中提到的使用flash hack看起來像是目前最完美解決方案，因而，我開始了 zeroClipboard 探險。因爲我在頁面中使用ajax 提交form，用了jQuery的庫，致使若干問題，爲此我再次尋找，發現了後來採用的解決方案—— zClip 。

zClip 結合了zeroClipboard 和 jQuery，知足個人須要，因爲其簡潔的接口設計，應該也知足大多數人的須要。固然，不得不提的是，其flash依賴致使其存在先天性缺陷，使用請當心。

下面我貼上其官網的使用說明（翻譯）：

1.  添加jQuery 和 zClip到頁面中：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

2.  綁定zClip和你用來複制的按鈕（或其餘元素）：

$(document).ready(function(){
                       
    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text()
    });
                       
    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"
                       
                       
    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('input#dynamic').val();}
    });
                       
    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"
                       
});

3.  默認複製完成後彈出alert，你能夠經過配置beforeCopy 和 afterCopy兩個回調函數來自定義：

$(document).ready(function(){
                     
    $("a#copy-callbacks").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('#callback-paragraph').text(),
        beforeCopy:function(){
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('#callback-paragraph').css('background','green');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }
    });
                     
});

4.  可定製參數：

使用注意事項：

1. IE 6, IE 7, IE 8, FF 3.6, Chrome 8, Safari 5, Opera 11 測試經過

2. 對於正式的CSS效果：

   /* zClip is a flash overlay, so it must provide */
   /* the target element with "hover" and "active" classes */
   /* to simulate native :hover and :active states. */
   /* Be sure to write your CSS as follows for best results: */
                   
   a:hover, a.hover {...}
   a:active, a.active {...}

3. 顯示、隱藏、移除zClip：

   $('a.copy').zclip('show'); // enable zClip on the selected element
                  
   $('a.copy').zclip('hide'); // hide zClip on the selected element
                  
   $('a.copy').zclip('remove'); // remove zClip from the selected element

4. 爲了使效果最好，請在頁面的佈局固定時綁定zClip到你的元素，雖然有一個函數用以自動調整zClip，但不能保證它不出錯。

其餘可參考解決方案：

1. 囊括全部方案合集： http://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/