当前位置：文江博客话题详情

如何在 jQuery 中实际使用 ZeroClipboard？

发布于 2024-08-31 23:42:03 字数 347 浏览 8 评论 0原文

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

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

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

我正在使用 jQuery。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

随心而道 2024-09-07 23:42:03

您链接到的页面上给出的“最小示例”代码 (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。

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

The "minimal example" code given on the page you link to (http://code.google.com/p/zeroclipboard/wiki/Instructions#Minimal_Example) appears to be what you want. I've copied it here and altered it to demonstrate putting text into a variable and then copying that text to the clipboard, since that's what you're interested in. Note that, in real life, what you'd presumably want to do is call the clip.setText() part within some function, since you might not know, at the point when the page is first loaded, what text you want to copy.

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

The flash element doesn't need to be "over the copied text"; it needs to be "glued" to whatever DOM element you want your user to manipulate -- most likely a button to click. The reason is that Javascript doesn't have access to the clipboard, so you need to use Flash instead. But Flash can only operate on the user's machine in response to a user's click -- so you "trick" the user into clicking on the Flash by making it an invisible overlay over an HTML element.

I'll note that while the particular example of copying to the user's clipboard is probably benign, this approach troubles me, as it wouldn't be hard to imagine the hidden flash element doing more malicious thing.

回复收藏 0 原文

筱果果 2024-09-07 23:42:03

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

?>

A slightly more complex jquery example. Copy the text when

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

?>

回复收藏 0 原文

后知后觉 2024-09-07 23:42:03

此代码仅在我的设置中与 chrome 一起工作，当我的主体区域中有一个标签时，例如

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

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

This code only works in my setup together with chrome when I have a tag in my body-area like

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

when the file-include is removed the button is not working.... really strange

回复收藏 0 原文

黒涩兲箜 2024-09-07 23:42:03

当前版本的 ZeroClipboard 实际上包含一个错误，该错误会导致使用 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>

The current version of ZeroClipboard actually contains a bug that would cause an JS error using the script suggested by JacobM - in the following scenario:

Create a reference to the ZeroClipboard.Client() returned from the new constructor. (e.g. var clip = new ZeroClipboard.Client();)
Set the text by doing clip.setText("string");
Change the DOM (hide the flash movie or an ancestor element)
Set the text again by doing clip.setText("some other string")

To avoid causing errors, the mouseover event listener should instead be used to set the text:

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

回复收藏 0 原文

~没有更多了~