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. 可定制参数：

使用注意事项：

IE 6, IE 7, IE 8, FF 3.6, Chrome 8, Safari 5, Opera 11 测试通过

对于正式的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 {...}

显示、隐藏、移除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

为了使效果最好，请在页面的布局固定时绑定zClip到你的元素，虽然有一个函数用以自动调整zClip，但不能保证它不出错。

其他可参考解决方案：

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

来源：oschina

链接：https://my.oschina.net/u/107361/blog/39251

标签

javascript

剪贴板

flash