【问题标题】:How can I get a simple ZeroClipboard copy-to-clipboard setup working within jQuery on jsFiddle on a single click?如何通过单击在 jsFiddle 上的 jQuery 中获得简单的 ZeroClipboard 复制到剪贴板设置?
【发布时间】:2014-03-19 15:41:55
【问题描述】:

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

以下 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();
        });
    });
});

是的,我知道这里还有其他类似的 ZeroClipboard 问题,但我还没有看到一个简单的 jsFiddle 版本真正起作用。我遇到的现有小提琴要么已弃用,要么由于其他原因不再起作用。

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

【问题讨论】:

    标签: javascript jquery flash copy-paste zeroclipboard


    【解决方案1】:

    这是一个可行的解决方案。在fiddle 上,我将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();
            });
        });
    });
    

    【讨论】:

    • 像魅力一样工作。聪明的解决方案。谢谢。
    • 在将链接更新到 SWF 和 JS 到我服务器上的文件 jsfiddle.net/andilab/bEQ6R/16 后,Fiddle 无法正常工作
    • 您也可以使用“beforecopy”事件来设置文本:它可以避免调用 setText()。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多