我怎么能得到一个简单的ZeroClipboard复制到剪贴板的设置工作在jQuery上的jsFiddle上一个单一的点击

How can I get a simple ZeroClipboard copy-to-clipboard setup working within jQuery on jsFiddle on a single click?

本文关键字：jQuery 设置 上的 工作 jsFiddle 单一 上一个 剪贴板 ZeroClipboard 怎么能 简单      更新时间：2023-09-26

我正在努力让ZeroClipboard在jQuery上下文中工作。我所追求的基本用法是剪切每个div的文本与类copy点击。

下面的jsFiddle工作在双击使用稳定的ZeroClipboard v1.3.3

http://jsfiddle.net/bEQ6R/

html: 

<div class="copy">Click this text to copy this text</div>
<div class="copy">Or click this text to copy this text</div>
<p class="debug flash-loaded">Flash player is loaded.</p>
<p class="debug confirm-copy">Text Copied.</p>
<textarea placeholder="Use this textarea to test your clipboard"></textarea>

js: 

$(document).ready(function() {
    ZeroClipboard.config({ moviePath: 'http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.3.2.swf',debug: true });    
    var client = new ZeroClipboard($('.copy'));
    client.on('load', function(client) {
        $('.flash-loaded').fadeIn();
        client.on('complete', function(client, args) {
            client.setText($(this).text());
            // client.setText('Manually Set Text to This instead of the contents of the div');
            console.log(client);
            $('.confirm-copy').fadeIn();
        });
    });
});

是的，我知道这里还有其他类似的零板问题，但我还没有看到一个简单的jsFiddle版本实际工作。我遇到的现有的fiddle要么被弃用，要么由于其他原因不再起作用。

同时，ZeroClipboard的演示在他们自己的网站http://zeroclipboard.org/上的相同版本似乎工作得很好，所以我知道这是可能的。

这是一个可行的解决方案。在小提琴上，我把client.on('complete'...改为client.on('mouseover'...，在第一次点击之前初始化ZeroClipboard flash文件。

$(document).ready(function() {
    ZeroClipboard.config({ moviePath: 'http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.3.2.swf',debug: true });
    var client = new ZeroClipboard($('.copy'));
    client.on('load', function(client) {
        $('.flash-loaded').text('Flash player loaded at ' + $.now()).fadeIn();
        client.on('mouseover', function(client, args) {
            client.setText($(this).text());
            $('.confirm-copy').text('text copied at ' + $.now()).fadeIn();
        });
    });
});
相关文章：