如何在 jQuery 中实际使用 ZeroClipboard？答案

【问题标题】：How to actually use ZeroClipboard in jQuery?如何在 jQuery 中实际使用 ZeroClipboard？
【发布时间】：2010-05-10 17:46:02
【问题描述】：

我就是拿不到这个东西。 ZeroClipboard 应该如何工作？为什么需要将 flash-element 移动到复制的文本上？

我读过这个东西：http://code.google.com/p/zeroclipboard/wiki/Instructions

谁能给我一个简短的 sn-p，当用户单击链接时，它可以将变量中的文本复制到用户剪贴板。这甚至可能吗？我不在乎，如果它不适用于所有浏览器（例如 IE6）。

我正在使用 jQuery。

【问题讨论】：

看看那个页面，有没有人注意到IE被称为“Internet Exploder”？
我认为这是浏览器的正确术语，但有人有时间帮助我吗？ :)
@ Eric + 500 看到这一点 :) （哦，我可以对评论投赞成票）
ZeroClipboard 不再支持，zclip 是新的。语法不同，但仍然很容易使用。

标签： jquery zeroclipboard

【解决方案1】：

您链接到的页面 (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 只能在用户的机器上运行以响应用户的点击——所以你通过将 Flash 设置为 HTML 元素上的不可见覆盖层来“诱骗”用户点击它。

我会注意到，虽然复制到用户剪贴板的特定示例可能是良性的，但这种方法让我很困扰，因为不难想象隐藏的 flash 元素会做更多恶意的事情。

【讨论】：

您好，感谢您的精彩回答！粘贴一些示例代码有什么变化吗？ :)
好的，添加了从说明页面复制并稍作修改的示例代码。
这不是 jQuery 解决方案 ;)
谁能帮我用小提琴完成这项工作？ jsfiddle.net/Vr4Ky/1
Joshc - 您包含在小提琴中的 ZeroClipboard 版本似乎与链接中讨论的版本不同（在原始问题中）。该版本使用非常不同的设置代码，在github.com/jonrohan/ZeroClipboard/#readme 讨论过

【解决方案2】：

一个稍微复杂的 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"\" />";

?>

【讨论】：

【解决方案3】：

当我的身体区域有标签时，此代码仅在我的设置中与 chrome 一起使用，例如

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

当文件包含被删除时，按钮不起作用....真的很奇怪

【讨论】：

【解决方案4】：

ZeroClipboard 的当前版本实际上包含a bug，使用 JacobM 建议的脚本会导致 JS 错误 - 在以下情况下：

创建对从新构造函数返回的 ZeroClipboard.Client() 的引用。（例如 var clip = new ZeroClipboard.Client();)
通过clip.setText("string");设置文本
更改 DOM（隐藏 flash 电影或祖先元素）
通过 clip.setText("some other string") 再次设置文本

为了避免导致错误，应该使用 mouseover 事件侦听器来设置文本：

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

【讨论】：