如何在 jQuery 中实际使用 ZeroClipboard？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2805009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to actually use ZeroClipboard in jQuery?
提问by Martti Laine
I just can't get this thing. How is ZeroClipboard supposed to work? Why does it need to move the flash-element over the copied text?
我就是拿不到这东西。ZeroClipboard 应该如何工作？为什么需要将 flash 元素移动到复制的文本上？
I've read this thing: http://code.google.com/p/zeroclipboard/wiki/Instructions
我读过这个东西：http: //code.google.com/p/zeroclipboard/wiki/Instructions
Can someone provide me a short snippet, which makes it possible to copy a text in variable to users clipboard, when user clicks a link. Is this even possible? I don't care, if it doesn't work on all browsers (IE6 for example).
有人可以为我提供一个简短的片段，当用户单击链接时，它可以将变量中的文本复制到用户剪贴板。这甚至可能吗？我不在乎，如果它不适用于所有浏览器（例如 IE6）。
I'm using jQuery.
我正在使用 jQuery。
采纳答案by Jacob Mattison
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.
您链接到的页面上给出的“最小示例”代码（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>
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.
flash 元素不需要“覆盖复制的文本”；它需要“粘合”到您希望用户操作的任何 DOM 元素上——很可能是一个要单击的按钮。原因是 Javascript 无法访问剪贴板，因此您需要改用 Flash。但是 Flash 只能在用户的机器上运行以响应用户的点击——因此您通过将 Flash 设置为 HTML 元素上的不可见叠加层来“诱骗”用户点击 Flash。
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.
我会注意到，虽然复制到用户剪贴板的特定示例可能是良性的，但这种方法让我感到困扰，因为不难想象隐藏的 flash 元素会做更多恶意的事情。
回答by ladieu
A slightly more complex jquery example. Copy the text when
一个稍微复杂的 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"\" />";
?>
回答by José
The current version of ZeroClipboard actually contains a bugthat would cause an JS error using the script suggested by JacobM - in the following scenario:
ZeroClipboard 的当前版本实际上包含一个错误，使用 JacobM 建议的脚本会导致 JS 错误 - 在以下场景中：
- 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")
- 创建对从新构造函数返回的 ZeroClipboard.Client() 的引用。（例如 var clip = new ZeroClipboard.Client();）
- 通过执行 clip.setText("string"); 设置文本
- 更改 DOM（隐藏 Flash 电影或祖先元素）
- 通过执行 clip.setText("some other string") 再次设置文本
To avoid causing errors, the mouseover event listener should instead be used to set the text:
为避免导致错误，应该使用 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>
回答by Michael
This code only works in my setup together with chrome when I have a tag in my body-area like
当我的身体区域中有一个标签时，此代码仅在我的设置中与 chrome 一起使用
<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
当文件包含被删除时按钮不起作用......真的很奇怪
