Question

我无法得到这个东西。 ZeroClipboard应该如何工作？为什么需要在复制的文本上移动flash元素？

我读过这件事：http://code.google.com/p/zeroclipboard/wiki/Instructions

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

我正在使用jQuery。

Answer 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元素会做更多恶意的事情。

Answer 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"\" />";

?>

Answer 3

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

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

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

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

如何在jQuery中实际使用ZeroClipboard？

4 个答案: