Question

我想要一个按钮，按下时将一些文本复制到用户剪贴板。 bellow是我正在使用的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在用户点击复制按钮时被触发。

P.S。我没有得到客户端错误

Answer 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>

Answer 2

我在旧版本的zeroClipboard（v 1.1.7）中遇到此问题。我升级到2.1.6版本，问题就消失了。希望有所帮助。

ZeroClipboard不会复制到剪贴板

2 个答案: