3

我在我的页面中使用 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 网站上的核心示例

4

2 回答 2

7

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

正如这些官方谷歌代码项目页面所述： here和here（对不起，链接已损坏），我发现建议将我们设置为复制元素的元素提供（在我的情况下，它是“复制”链接在 jquery 对话框内），一个更高的 z-index 值（比如 9999）。

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

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

于 2012-05-21T11:07:57.743 回答
2

enter image description here

Your code is working fine. Just make sure you are testing code on a host. It will not work like other other html files work. The files must be placed on some host e.g localhost to get it working.

P.S I didnt read about the dialog copy button . Checking that now.

于 2012-05-21T09:06:36.733 回答