2011-03-31 221 views
3

我使用http://www.steamdev.com/zclip/#usage將一些文本複製到剪貼板,並且代碼正常工作。它使用閃光燈創建交叉瀏覽器解決方案,它基於ZeroClipboard,這似乎被認爲是目前最好的工作解決方案。jquery/javascript複製到剪貼板

但是我想多次複製到我的頁面上的剪貼板按鈕或鏈接。這是一個例子。

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功能,你會看到$(本)的.text()將返回,而不是整個頁面只是文本的鏈接標籤之間。

做這樣的事情

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

}); 

});

略有改善,但會返回鏈接標記之間的所有文本,如您在此處看到的。 http://jsfiddle.net/stofke/hAh3j/

回答

4

這似乎是工作 - 有人也許能使其更加優雅

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

我試過,但它不工作。試着用這段代碼分析jsfiddle,你會發現它不起作用。 http:// jsfiddle。net/stofke/EAZYW/ – Stofke 2011-03-31 06:55:13

+0

@Stofke請參閱更新 – mplungjan 2011-03-31 07:48:44

+2

是的,按照我想要的方式工作 – Stofke 2011-03-31 07:55:26

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/

0

這是我們按照巴菲特真技術。

要使用零複製到剪貼板,您需要兩個文件 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> 

數據剪貼板文本屬性的值,當元素上的事件ACCUR傳遞給ZeroClipboard的構造ZeroClipboard自動複製

0

輕量級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"); 
});