如何在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？

回答

相关问题