Jquery/javascript 复制到剪贴板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5496120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery/javascript copy to clipboard
提问by Stofke
I'm using http://www.steamdev.com/zclip/#usageto 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.
我正在使用http://www.steamdev.com/zclip/#usage将一些文本复制到剪贴板，该代码运行良好。它使用 flash 创建跨浏览器解决方案，它基于ZeroClipboard，这似乎被认为是目前最好的工作解决方案。
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/
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.
此代码有效，它将优惠券代码的文本复制到剪贴板并打开一个带有正确链接的新页面。如何在其他链接上使用该代码而不必为每个链接/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.
不起作用：正如您在此处看到的：http: //jsfiddle.net/stofke/EAZYW/如果您删除 afterCopy 函数，您将看到 $(this).text() 将返回整个页面，而不仅仅是链接标签之间的文本。
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/
稍微改进它，但返回链接标记之间的所有文本，如您所见。 http://jsfiddle.net/stofke/hAh3j/
回答by mplungjan
UPDATE: This no longer works but I cannot delete the post
更新：这不再有效，但我无法删除帖子
This seems to work - someone might be able to make it more elegant
这似乎有效 - 有人可以让它更优雅
$(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'));
}
});
});
});
回答by Stofke
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 同样简单，我只是添加了这段代码，以防有人想要不使用 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"));
});
});
回答by Saurabh tiwary
This is what we follow in Oodles Technologies.
这就是我们在 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
要使用零复制到剪贴板，您需要两个文件 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 automatically copy the value of data-clipboard-text attribute when event accur on element pass to ZeroClipboard's constructor
当元素发生事件时，ZeroClipboard 自动复制 data-clipboard-text 属性的值传递给 ZeroClipboard 的构造函数
回答by Dazza
Light weight jQuery solution... re-use class to copy text from any element.
轻量级 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");
});
