Jquery/javascript 复制到剪贴板

发布于 2024-10-28 13:09:42 字数 1250 浏览 2 评论 0原文

我正在使用 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/

原文

I'm using http://www.steamdev.com/zclip/#usage to copy some text to the clipboard and that code is working just fine. It uses flash to create a crossbrowser solution and it is based on ZeroClipboard, which seems to be considered to be the best working solution at the moment.

However I would like to have multiple copy to clipboard buttons or links on my page. Here is an example.

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

This code works, it copies the text of the coupon code to the clipboard and opens up a new page with the correct link. How can I use that code on other links without having to duplicate it for each and every link / id.

Using just the class

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

});

doesn't work: as you can see here: http://jsfiddle.net/stofke/EAZYW/
if you remove the afterCopy function you'll see that $(this).text() will return the whole page instead of just the text between the link tag.

doing something like this

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

});

});

slightly improves upon it but returns all text between the link tag as you can see here.
http://jsfiddle.net/stofke/hAh3j/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

禾厶谷欠 2024-11-04 13:09:42

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

这似乎有效 - 有人可能能够使其更优雅

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'));
        }
    });
  });
});

UPDATE: This no longer works but I cannot delete the post

This seems to work - someone might be able to make it more elegant

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'));
        }
    });
  });
});

回复收藏 0 原文

香草可樂 2024-11-04 13:09:42

我实际上发现直接使用 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/

I actually discovered that using ZeroClipboard directly is just as easy, I just added this code in case someone wants a solution without using 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/

回复收藏 0 原文

静若繁花 2024-11-04 13:09:42

这就是我们在 Ooodles 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 的构造函数

This is what we follow in Oodles Technologies.

To use zero copy to clipboard you need two files
1 . ZeroClipboard.js
2 .ZeroClipboard.swf
both file can be download from here

<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 automatically copy the value of data-clipboard-text attribute when event accur on element pass to ZeroClipboard's constructor

回复收藏 0 原文

以酷 2024-11-04 13:09:42

轻量级 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");
});

Light weight jQuery solution... re-use class to copy text from any element.

$(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");
});

回复收藏 0 原文

~没有更多了~