javascript - 如何创建将选定文本复制到客户端剪贴板的 HTML 按钮？

Question

这是我的用例的屏幕截图：

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

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

我只关心让它在现代浏览器上运行，如果它在 IE8 上运行，这是一个额外的好处，但不是 100% 必需的。

Answer 1

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

我过去使用过Clippy。它重量轻且速度快，并且可以按照包装盒上的说明进行操作。

Answer 2

该页面似乎提供了执行此操作的代码：

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 的浏览器会要求允许这样做，但我认为这是无法避免的。