Question

我在我的页面中使用了jquery ui对话框，令人惊讶的是，zeroclipboard copy-to-clipboard功能在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

的核心示例

Answer 1

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

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

我发现的另一种方法是，如果我给jquery对话框div一个较少的z-index值，那么复制到剪贴板的功能就可以了。

希望这有助于将来。

Answer 2

enter image description here

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

P.S我没看过对话复制按钮。现在检查一下。

jquery对话框中的zeroclipboard复制文本不起作用

2 个答案: