jQuery对话框中的zeroclipboard复制文本不起作用答案

【问题标题】：zeroclipboard copy text inside jquery dialog doesn't workjQuery对话框中的zeroclipboard复制文本不起作用
【发布时间】：2012-05-21 06:25:30
【问题描述】：

我在我的页面中使用 jquery ui 对话框，令人惊讶的是 zeroclipboard 复制到剪贴板功能在 jquery 对话框中不起作用。

这是我的全部代码...

<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" 
    type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://davidwalsh.name/dw-content/ZeroClipboard.js"></script>

    <script type="text/javascript"> 
    $(function(){
        $('#ex1').click(function(){
            var div = $('#div1');
            div.dialog(
                {
                    title:'Dialog1',
                    width: 300,
                    height: 150,
                    closeOnEscape: false
                });
        });
    });

    function toClipboard(me, msg_id) {
                        ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
                        var clip = new ZeroClipboard.Client();
                        //clip.setHandCursor( true );
                        var txt = $("#msg_p_span_"+msg_id).html();

                        console.log("Text: "+txt);
                            clip.addEventListener('mousedown',function() {
                            clip.setText(txt);
                            console.log("Copied");
                            });
                            clip.addEventListener('complete',function(client,text) {
                            alert('copied: ' + text);
                            });
                        clip.glue(me);
                }
    </script>

<title>jQuery UI dialog extra demo</title>
</head>
<body>

  <span id="msg_p_span_1" style="display:none;">Testing the clipboard copy 1.</span>
  <span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 1)">Copy</span>
  <button id="ex1">Launch dialog</button>

<div id="div1" style="display:none;">

<p style="padding: 10px 3px; font-size: 12px;" id="msg_p_2">
<span id="msg_p_span_2">Testing the clipboard copy 2.</span>
<span style="float: right; width: 25px; margin-right: 10px;">
<span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 2)">Copy</span>
</span>
</p>

</div>  
</body>
</html>

如果我单击第一个“复制”链接，文本将被很好地复制并生成警报。但是当我启动 jquery 对话框并单击其中的“复制”链接时，文本不会被复制。

也许有人可以用上面的代码（复制粘贴）重现问题并找到它。

注意：我正在关注Davidwalsh site的核心示例

【问题讨论】：

我什至尝试为 setText 放置一个手动文本，例如：clip.setText("Hello world")。但这也不起作用。
如果您没有在弹出窗口中得到它，它会起作用吗？
是的，复制到剪贴板功能很好，对于 jquery 对话框之外的链接......正如我所说，上面代码中的第一个“复制”链接工作正常。

标签： jquery copy jquery-dialog zeroclipboard

【解决方案1】：

好吧，经过大量谷歌搜索，我找到了解决问题的方法。

正如这些官方谷歌代码项目页面所述： here 和here （对不起，链接坏了），我发现建议给我们设置为复制元素的元素（在我的例子中，它是jquery对话框中的“复制”链接），更高的 z-index 值（比如 9999）。

我发现的另一种方法是，如果我为 jquery 对话框 div 提供了较小的 z-index 值，则复制到剪贴板功能工作正常。

希望这对将来的人有所帮助。

【讨论】：

【解决方案2】：

您的代码运行良好。只要确保您在主机上测试代码。它不会像其他 html 文件一样工作。这些文件必须放在某个主机上，例如 localhost 才能使其正常工作。

P.S 我没有阅读有关对话框复制按钮的信息。现在检查。

【讨论】：

您似乎点击了第一个“复制”链接。请启动 jquery 对话框并单击启动的 jquery 对话框内的“复制”链接。顺便说一句，我正在测试本地主机本身的代码......我正在使用 Firefox 9、Apache 2.2.14、Windows。