不复制到剪贴板

ZeroClipboard Does not copy to clipboard

本文关键字：剪贴板 复制      更新时间：2023-09-26

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

注:我没有客户端错误

此代码有效。也许你可以相应地修改你的代码。

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

我在使用旧版本的zeroClipboard (v 1.1.7)时遇到了这个问题。我升级到2.1.6版本，这个问题消失了。

相关文章：