如何创建将所选文本复制到客户端剪贴板的HTML按钮?

时间:2012-04-25 00:26:49

标签: javascript html copy clipboard

以下是我的用例的截图:

enter image description here

按钮只是<button>Copy To Clipboard</button>元素。

实现这一目标的最佳方法是什么?我正在使用jQuery。

我只担心让它适用于现代浏览器,如果它适用于IE8&gt;这是一个额外的奖励,但不是100%要求。

2 个答案:

答案 0 :(得分:1)

大多数跨浏览器实现使用Flash来克服安全限制。 AFAIK,没有用于访问系统粘贴板的W3C标准。

我过去曾使用Clippy。它重量轻,速度快,完全符合它所说的内容。

答案 1 :(得分:0)

This page似乎提供了执行此操作的代码:

function copyToClipboard(s)
{
    if( window.clipboardData && clipboardData.setData )
    {
        clipboardData.setData("Text", s);
    }
    else
    {
        // You have to sign the code to enable this or allow the action in about:config by changing
        user_pref("signed.applets.codebase_principal_support", true);
        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

        var clip Components.classes['@mozilla.org/widget/clipboard;[[[[1]]]]'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip) return;

        // create a transferable
        var trans = Components.classes['@mozilla.org/widget/transferable;[[[[1]]]]'].createInstance(Components.interfaces.nsITransferable);
        if (!trans) return;

        // specify the data we wish to handle. Plaintext in this case.
        trans.addDataFlavor('text/unicode');

        // To get the data from the transferable we need two new objects
        var str = new Object();
        var len = new Object();

        var str = Components.classes["@mozilla.org/supports-string;[[[[1]]]]"].createInstance(Components.interfaces.nsISupportsString);

        var copytext=meintext;

        str.data=copytext;

        trans.setTransferData("text/unicode",str,copytext.length*[[[[2]]]]);

        var clipid=Components.interfaces.nsIClipboard;

        if (!clip) return false;

        clip.setData(trans,null,clipid.kGlobalClipboard);      
    }
}

<textarea id='testText'>#COPYTOCLIPBOARD CODE#</textarea><br>
<button onclick='copyToClipboard(document.getElementById('testText').value);'>

显然,基于Mozilla的浏览器会要求获得许可,但我不认为这是可以避免的。