2014-03-26 96 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,問題沒有了。希望有所幫助。