ZeroClipboard 不复制到剪贴板答案

【问题标题】：ZeroClipboard Does not copy to clipboardZeroClipboard 不复制到剪贴板
【发布时间】：2014-03-26 21:38:37
【问题描述】：

我想要一个按钮，当按下它时，它会将一些文本复制到用户剪贴板。下面是我正在使用的 javascript 代码和 html 代码

copyBuidToClipboard: function (e){
        //from https://github.com/zeroclipboard/zeroclipboard
        var client = new ZeroClipboard($(e.target).closest('button'));
        client.on("ready", function (readyEvent){
            console.log('I am Ready');
            client.on("copy", function (event){
                event.clipboardData.setData("text/plain", "Copy Me!!!!");
            });
            client.on("aftercopy", function (event){
                //event.target.style.display = "none";
                console.log("Copied");
            });
        });

        client.on('error', function (event){
            console.log( 'ZeroClipboard error of type "' + event.name + '" occurred: ' + event.message );
        });
    },





<button data-hook="copyClip" title="Copy buid to clipboard" class="btn btn-default btn-xs">
                <span class="glyphicon glyphicon-paperclip"></span>
            </button>

我正在使用以下库：jquery、jquery-ui、backbone、backbone-layoutmanager、twitter bootstrap，而不是上面的 javascript 方法 copyBuidToClipboard 在用户单击复制按钮时被触发。

附：我没有得到客户端错误

【问题讨论】：

您在什么浏览器中测试它以及在什么操作系统中？零剪贴板通过 flash 工作，如果浏览器没有安装 flash，它将无法工作。
我正在运行 Mac OSX 10.9.2 和 Google Chrome。如果是 Flash 问题，不会调用 on.('error') 函数
用户点击按钮时上面的方法没有被调用吗？

标签： javascript jquery-ui backbone.js zeroclipboard

【解决方案1】：

此代码有效。也许您可以相应地更改您的代码。

<html>
     <head>
        <title>ZeroClipboard Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     </head>
   <body>
    <p>This text will be copied when you click the button</p>
    <p id='copy_this_text' style="width: 50%; border: 1px solid #888">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod <i>tempor incididunt ut labore</i> et dolore magna
        aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <button id="copy-button" data-clipboard-target="copy_this_text">Copy to Clipboard</button>
    <br>
    <p>Paste into this box with Ctrl/Cmd-V to show that it worked.</p>
    <textarea cols='60' rows='10'></textarea>

    <!-- Needed for copy to clipboard. Specify your location for ZeroClipboard.js file -->
    <script type="text/javascript" src="js/ZeroClipboard.js"></script>
    <script type="text/javascript">
                        // Specify where the Flash movie can be found if not in root folder for web site, else won't work
                        $(document).ready(function() {
                            ZeroClipboard.config({moviePath: 'js/ZeroClipboard.swf'});

                            var client = new ZeroClipboard(document.getElementById("copy-button"));

                            client.on('ready', function(event) {
                                console.log('movie is loaded');

                                client.on('copy', function(event) {
                                    //target is defined in data-clipboard-target while creating button
                                    event.clipboardData.setData('text/plain', event.target.value);//instead of value, innerText works as well
                                });

                                // callback triggered on successful copying
                                client.on('aftercopy', function(event) {
                                    console.log("Text copied to clipboard: \n" + event.data['text/plain']);
                                });
                            });

                            // In case of error - such as Flash not being available
                            client.on('wrongflash noflash', function() {
                                ZeroClipboard.destroy();
                            });
                        });
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

我在使用旧版本的 zeroClipboard (v 1.1.7) 时遇到了这个问题。我升级到 2.1.6 版本，问题就消失了。希望对您有所帮助。

【讨论】：