Jquery/javascript 复制到剪贴板答案

【问题标题】：Jquery/javascript copy to clipboardJquery/javascript 复制到剪贴板
【发布时间】：2011-03-31 06:40:26
【问题描述】：

我正在使用http://www.steamdev.com/zclip/#usage 将一些文本复制到剪贴板，并且该代码运行良好。它使用 flash 来创建跨浏览器解决方案，它基于ZeroClipboard，这似乎被认为是目前最好的工作解决方案。

但是，我希望在我的页面上有多个复制到剪贴板按钮或链接。这是一个例子。

http://jsfiddle.net/stofke/TB23d/

此代码有效，它将优惠券代码的文本复制到剪贴板并打开一个带有正确链接的新页面。我怎样才能在其他链接上使用该代码，而不必为每个链接/ id 复制它。

只使用类

$(function() {
$('.copy').zclip({
    path: 'http://shopsheep.com/js/ZeroClipboard.swf',
    copy: $(this).text(),
    afterCopy: function() {
        window.open($(this).attr('href'));
    }
});

});

不起作用：如您在此处看到的：http://jsfiddle.net/stofke/EAZYW/ 如果您删除 afterCopy 函数，您会看到 $(this).text() 将返回整个页面，而不仅仅是链接标记之间的文本。

做这样的事情

$(function() {
$('a.copy', this).zclip({
    path: 'http://shopsheep.com/js/ZeroClipboard.swf',
    copy: $('a.copy', this).text(),

});

});

稍微改进了它，但返回链接标记之间的所有文本，如您在此处看到的。 http://jsfiddle.net/stofke/hAh3j/

【问题讨论】：

我投票关闭并删除此问题，因为它所基于的代码不再存在。我无法删除自己的答案

标签： javascript jquery zeroclipboard zclip

【解决方案1】：

更新：这不再有效，但我无法删除帖子

这似乎可行 - 有人可以让它更优雅

http://jsfiddle.net/5nLw6/7/

$(function() {
    $('.copy').each(function() {
        var linkId = $(this).attr("id");
        $(this).zclip({
        path: 'http://shopsheep.com/js/ZeroClipboard.swf',
        copy: $("#"+linkId).text(),
        afterCopy: function() {
            window.open($('#'+linkId).attr('href'));
        }
    });
  });
});

【讨论】：

我试过了，但它不起作用。尝试使用此代码分叉 jsfiddle，您会发现它不起作用。 jsfiddle.net/stofke/EAZYW
我在一个表格中尝试了 zClip，它失败了，没有呈现 Flash。现在直接使用 ZeroClipboard。
致那些决定在不发表评论的情况下对两年前的帖子投反对票的人...谢谢。喜欢飞过的投票。
@Jota 这是一个九岁的帖子。事情变了。 SWF 不再存在，如果存在，它可能会被阻止。不要在九岁的帖子上投反对票，只需发表评论说这不再有效

【解决方案2】：

我实际上发现直接使用 ZeroClipboard 也很简单，我只是添加了这段代码，以防有人想要一个不使用 zclip 的解决方案。

ZeroClipboard.setMoviePath('http://shopsheep.com/js/ZeroClipboard.swf');
$(document).ready(function() {
    $(".copy").each(function(i) {
        var clip = new ZeroClipboard.Client();
        var myTextToCopy = $(this).text();
        var myTextUrl = $(this).attr('href');
        clip.setText(myTextToCopy);
        clip.addEventListener('complete', function(client, text) {
            window.open(myTextUrl);
        });
        clip.glue($(this).attr("id"));
    });
});

http://jsfiddle.net/stofke/JxMbd/

【讨论】：

【解决方案3】：

这就是我们在 Oodles Technologies 中所遵循的。

要使用零复制到剪贴板，您需要两个文件 1. ZeroClipboard.js
2 .ZeroClipboard.swf 这两个文件都可以从这里下载

<html>
<head>
    <script src =”../ZeroClipboard.js”></script>
    <script >
     // configure ZeroClipboard first
     ZeroClipboard.config( { moviePath : /path/swffile/ZeroClipboard.swf } );

     // initialize constructor
    var client = new ZeroClipboard($(“#elementid”));

    /* elementid is the element on which click , the data will copy  to clipboard. you can also pass multiple elements, it use jquery selector */
        </script>
<body>
<input type=”text”  id =”targetid”></button>
<button  id =”elementid” data-clipboard-text ='data for copy’ >copy</button>
</body>
</head>
<html>

当元素上的事件发生时，ZeroClipboard 会自动复制 data-clipboard-text 属性的值到 ZeroClipboard 的构造函数

【讨论】：

【解决方案4】：

轻量级 jQuery 解决方案...重用类从任何元素复制文本。

$(document).on('click', '.copytoclipboard', function(e) {
  if($("#holdtext").length < 1)
    $("body").append('<textarea id="holdtext" style="height:0;width:0;border:0;outline:0;resize:none;"></textarea>');
  $("#holdtext").val($(this).text()).select();
  document.execCommand("Copy");
});

【讨论】：