如何在jQuery中實際使用ZeroClipboard？

我只是無法得到這個東西。 ZeroClipboard應該如何工作？爲什麼需要將flash元素移動到複製的文本上？如何在jQuery中實際使用ZeroClipboard？

我讀過這件事：http://code.google.com/p/zeroclipboard/wiki/Instructions

有人可以提供我一個小片段，這使得它能夠以變量的文本複製到剪貼板的用戶，當用戶點擊一個鏈接。這甚至有可能嗎？我不在乎，如果它不適用於所有瀏覽器（例如IE6）。

我正在使用jQuery。

來源

2010-05-10 Martti Laine

+23

看看那個頁面，沒有人注意到IE被稱爲「Internet Exploder」嗎？ – Eric 2010-05-10 17:52:53

我認爲這是瀏覽器的正確名詞，但有人有時間來幫助我？ :) – 2010-05-10 17:57:25

@埃裏克+ 500爲看到:)（哦，我可以剛剛upvote評論） – Kamal 2010-05-13 11:00:17

鏈接到頁面（http://code.google.com/p/zeroclipboard/wiki/Instructions#Minimal_Example）上的「最小示例」代碼看起來就是您想要的。我已經在這裏複製了它並修改它以演示如何將文本放入一個變量，然後將該文本複製到剪貼板，因爲這就是您感興趣的內容。請注意，在現實生活中，您想要做的是請在某個函數中調用clip.setText()部分，因爲在頁面首次加載時您可能不知道要複製的文本。

<html> 
<body> 
     <script type="text/javascript" src="ZeroClipboard.js"></script> 

     <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div> 

     <script language="JavaScript"> 
       var clip = new ZeroClipboard.Client(); 
       var myTextToCopy = "Hi, this is the text to copy!"; 
       clip.setText(myTextToCopy); 
       clip.glue('d_clip_button'); 
     </script> 
</body> 
</html>

Flash元素並不需要「在複製的文本」;它需要「粘」到任何您希望用戶操作的DOM元素 - 最有可能是點擊按鈕。原因是Javascript無法訪問剪貼板，因此您需要使用Flash。但是，Flash只能在用戶的機器上操作以響應用戶的點擊 - 所以您可以「欺騙」用戶通過使其成爲HTML元素上的不可見疊加層來點擊Flash。

我會注意到，雖然複製到用戶的剪貼板的特定示例可能是良性的，但這種方法困擾我，因爲不難想象隱藏的Flash元素會做更惡意的事情。

來源

2010-05-10 18:05:26

嘿，謝謝你的回答！獲取一些示例代碼粘貼的任何更改？ :) – 2010-05-10 18:11:32

好的，添加了示例代碼複製並稍微修改指令頁面。 – 2010-05-10 18:20:39

哇，它的工作原理。謝謝！ – 2010-05-10 18:32:45

此代碼僅在我的設置加上鑲邊時，我有一個像

<script type="text/javascript" src="js-file-doesnt-exists-404.js"></script> 
<div> 
...... 
some stuff here 
...... 
.... 
</div> 
...some more stuff.... 
<the button> 
....

當文件包括被刪除的按鈕不工作在我的身體面積標記工程....真奇怪

來源

2010-11-27 05:44:03 Michael

一個稍微複雜一點的jquery示例。複製文本時

<script language="JavaScript"> 
      ZeroClipboard.setMoviePath('zeroclipboard/ZeroClipboard.swf'); 
     $(document).ready(function(){ 
       $(".clickme").each(function (i) { 
        var clip = new ZeroClipboard.Client(); 

        var myTextToCopy = $(this).val(); 
        clip.setText(myTextToCopy); 
         clip.addEventListener('complete', function (client, text) { 
       alert("Copied text to clipboard."); 
       }); 
        clip.glue($(this).attr("id")); 



       }); 


     }); 

    </script> 



<?php 
//these text boxes were in a loop 
for($i=0;$i<10;$i++) 
    echo "<input type=\"text\" id=\"x$i\" class=\"clickme\" value=\"$value"\" />"; 

?>

來源

2010-12-15 22:24:44 ladieu

ZeroClipboard的當前版本實際上包含a bug，將導致使用JacobM建議腳本的JS錯誤 - 在以下情形：

創建於ZeroClipboard參考。 Client（）從新的構造函數返回。（例如，var clip = new ZeroClipboard.Client（）;）
通過執行clip.setText（「string」）;
改變DOM（隱藏Flash影片或其祖先元素）
做clip.setText（「其他一些字符串」）

再次將文本設置爲避免造成錯誤，鼠標懸停事件監聽器應改爲用於設置文字：

<html> 
<body> 
    <script type="text/javascript" src="ZeroClipboard.js"></script> 

    <div id="d_clip_button">Copy To Clipboard</div> 

    <script language="JavaScript"> 
     var clip = new ZeroClipboard.Client(), 
      myTextToCopy = "Hi, this is the text to copy!";      
     clip.glue('d_clip_button'); 
     clip.addEventListener('onMouseOver', clipboardEvent); 
     function clipboardEvent() { 
      clip.setText(myTextToCopy); 
     } 
    </script> 
</body> 
</html>

來源

2011-09-08 16:43:28

如何在jQuery中實際使用ZeroClipboard？

回答

相關問題