使用 ZeroClipboard 通过 zClip 库复制文本时遇到问题

Question

我在使用 zeroclipboard 复制文本时遇到问题。 这是我的html代码：

<dl class="codebox"><dt>Code: <a href="#" onclick="selectCode(this); return false;">Select all</a> | <a id="copytxt" href="#" onclick="return false;" class="">Copy to clipboard</a><div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; width: 97px; height: 15px; z-index: 99; left: 196px; top: 1032px; "><embed id="ZeroClipboardMovie_1" src="code/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="97" height="15" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=97&amp;height=15" wmode="transparent"></div></dt><dd><code>This is my code that I want to copy</code></dd></dl>

这是我复制文本的 jQuery 代码：

<script type="text/javascript">
$(document).ready(function(){
        $("#copytxt").zclip({
            path: "code/ZeroClipboard.swf",
            copy: function(){return jQuery(".codebox").find(".prettyprint");}
      });
});
</script>

这是我遇到麻烦的地方，因为当我单击“复制到剪贴板”链接时，它给了我一个警告框，但它说它没有复制任何内容，这意味着除了这部分之外一切都很好：

copy: function(){return jQuery(".codebox").find(".prettyprint");}

我已经尝试了一切来解决它。 我还有另一个问题，上面的代码只将 zeroclipboard 嵌入到第一个具有 'copytxt' ID 的元素中，而不是全部。

这是出现问题的地方之一（在我的论坛上）： -删除-

我不知道它是否会有所帮助，但我正在使用 phpBB。 我还使用 zclip：http://www.steamdev.com/zclip/ 作为 zeroclipboard。

谢谢。

Answer 1

它只附加到具有 copytxt id 的一项的原因是每个页面只能有一个具有给定 id 的元素。 ID 必须是唯一的。

它可能不会将任何内容复制到剪贴板，因为copy: 选项采用返回的函数：“任何字符串，或任何返回字符串的javascript 表达式或函数”。您的函数返回一个不是字符串的 jQuery 对象。如果您希望将文本从 .prettyprint 元素中取出（您没有在示例 HTML 中显示），那么您需要像这样从中取出文本：

 copy: function(){return jQuery(".codebox").find(".prettyprint").text();}

如果您希望它在多个地方工作，请使用类名而不是 id，并使用一个选择器来获取具有该类名的所有对象。

如果您希望它获取与单击的链接相关的文本，则需要更改文本检索代码以从与单击的内容相关的对象中获取文本。

要相对于点击的内容获取它并允许多个点击，您可以将id="copytxt" 更改为class="copytxt" 并使用如下代码：

<script type="text/javascript">
$(document).ready(function(){
        $(".copytxt").zclip({
            path: "code/ZeroClipboard.swf",
            copy: function() {
                return jQuery(this).closest(".codebox").find(".prettyprint").text();
            }
      });
});
</script>

添加jQuery(this).closest(".codebox") 开始在与点击点具有class="codebox" 的最近祖先处搜索.prettyprint 对象。因此，它会从点击发生的位置向上爬上祖先树，找到父级 codebox，然后在该代码框中找到 prettyprint。

对$(".copytxt").zclip 的更改允许它返回所有带有class="copytxt" 的对象，而不是只返回一个带有id="copytxt" 的对象。