2014-03-26 91 views
0

我想要一个按钮时,按下复制一些文本到用户剪贴板。波纹管是JavaScript代码和HTML代码我使用ZeroClipboard不会复制到剪贴板

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,骨干,骨干,布局管理器,Twitter的引导,而不是上面的JavaScript方法copyBuidToClipboard得到由发射时用户点击复制按钮。

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

+0

在什么浏览器中测试它,并在什么操作系统?零剪贴板通过闪光灯工作,如果浏览器没有安装闪光灯,它不会工作。 – user2633669

+0

我正在运行Mac OSX 10.9.2和Google Chrome。如果这是一个闪存问题将不会on(。'错误')函数被称为 – lufthansa747

+0

当用户单击按钮时上述方法不会被调用? – Jebin

回答

0

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

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

我有一个旧版本的zeroClipboard(v 1.1.7)的问题。我升级到版本2.1.6,问题没有了。希望有所帮助。