无法使用ZeroClipboard使用zClip库复制文本

时间:2012-03-24 23:37:54

标签: javascript jquery html zeroclipboard zclip

我无法使用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的第一个元素中,而不是全部。

以下是问题发生的地方之一(在我的论坛上): -removed -

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

感谢。

1 个答案:

答案 0 :(得分:0)

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

它可能没有将任何内容复制到剪贴板,因为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"的对象。