如何使用clipboard.js或zeroclipboard复制div的内容？

-1

我在我的HTML中有一些div，我想复制一个div的内容，当我点击该div。如何使用clipboard.js或zeroclipboard复制div的内容？

<div class="container">Hello</div> 
<div class="container">World</div> 
<div class="container">LearnJS</div>

所以当我点击第一个div时，它会复制剪贴板上的“Hello”。

我搜索了这个网站，发现了一些zeroclipboard和clipboard.js，但我不知道如何使用它;我是jQuery的新手。

我该如何编写一个函数来复制div的内部文本onclick？

来源

2015-10-22 victor

[复制没有Flash到剪贴板]的可能的复制（http://stackoverflow.com/questions/6355300/copy-to-clipboard-without-flash） – blm

https://github.com/zeroclipboard/ jquery.zeroclipboard – epascarello

@victor相信用户是基于你的帖子的内容进行投票的，他们只能在阅读后才能知道。投票结束是为该网站贡献一段时间后获得的特权;这些用户基本上被信任在一个问题在别处被询问和回答时做出正确的决定;您无需将粗体内容添加到您的问题中。 – TylerH

对不起，这里有一个工作解决方案。只需将您的课程从“容器”更改为“c”或其他任何内容以匹配下面的$（'。c'）选择器（container是Bootstrap使用的类，这是一个非常流行的库）。当您单击其中一个DIV时，文本将被选中并复制到剪贴板。旧的浏览器将无法正常工作，顺便说一句。

$(function() { 
    $('.c').on('click', function() { 
     SelectText($(this)[0]); 
     document.execCommand('copy'); 
    }); 

    function SelectText(element) { 
     var doc = document, range, selection; 
     if (doc.body.createTextRange) { 
      range = document.body.createTextRange(); 
      range.moveToElementText(element); 
      range.select(); 
     } else if (window.getSelection) { 
      selection = window.getSelection(); 
      range = document.createRange(); 
      range.selectNodeContents(element); 
      selection.removeAllRanges(); 
      selection.addRange(range); 
     } 
    } 
});

来源

2015-10-22 18:03:50

不工作，你可以给这个jsfiddle – victor

修正它作为一个完整的例子。在加载jQuery之后，只需在脚本标记中添加HMTL即可。 –

https://jsfiddle.net/z50czLLw/ –

如何使用clipboard.js或zeroclipboard复制div的内容？

回答

相关问题