Javascript clipboardjs将div的html内容复制到剪贴板

我尝试使用javascript插件复制多个div的html内容。请不要发布其他选择，因为我想试试这个插件，因为它在我想介绍的浏览器上看起来很可靠

我已经看过zenorocha的github，但这段代码似乎只是返回了一个

未捕获的TypeError:非法构造函数

new Clipboard('.copy', {
    text: function() {
        var htmlBlock = document.querySelector('.yourSelector');
        return htmlBlock.innerHTML;
    }
});

我已经创建了一个如果有人可以帮我复制div的html内容

JS

// copy to clipboard
new Clipboard('.copy');

new ClipboardJS('.copy', {
    text: function(trigger) {
        elem = $(trigger).data('clipboard-element');
        var htmlBlock = document.querySelector(elem);
        return htmlBlock.innerHTML;
    }
});

HTML

<div id="content_1">
   <div><b>Heading Post 1</b></div>
   <div>Blah, blah, blah</div>
</div>

<button class="copy" data-copy-element="content_1">
   Copy to clipboard
</button>

<div id="content_1">
   <div><b>Heading Post 1</b></div>
   <div>Blah, blah, blah</div>
</div>

<button class="copy" data-clipboard-element="#content_1">
   Copy to clipboard
</button>

标题栏1
废话，废话，废话
复制到剪贴板

我创建了一个新的数据属性，名为

data copy element

，因为在一个页面上会有多个按钮和内容块

看到小提琴了吗

这真的有可能吗

---

提前感谢。

剪贴板

是一个本地类，可通过（以及其他位置）访问

如果您想让代码正常工作，请将

剪贴板

更改为

剪贴板

。事实上，这是一个错误。这很好：

new ClipboardJS('.copy', {
    text: function() {
        // based on your fiddle, you may need to replace this selector, too.
        var htmlBlock = document.querySelector('.yourSelector');
        return htmlBlock.innerHTML;
    }
});

---

Clipboard

是一个本机类，可通过（以及其他位置）访问

如果您想让代码正常工作，请将

剪贴板

更改为

剪贴板

。事实上，这是一个错误。这很好：

new ClipboardJS('.copy', {
    text: function() {
        // based on your fiddle, you may need to replace this selector, too.
        var htmlBlock = document.querySelector('.yourSelector');
        return htmlBlock.innerHTML;
    }
});

---

这是我的最后一段代码，我使用了一点jQuery来获取与copy按钮相关的特定元素

JS

// copy to clipboard
new Clipboard('.copy');

new ClipboardJS('.copy', {
    text: function(trigger) {
        elem = $(trigger).data('clipboard-element');
        var htmlBlock = document.querySelector(elem);
        return htmlBlock.innerHTML;
    }
});

HTML

<div id="content_1">
   <div><b>Heading Post 1</b></div>
   <div>Blah, blah, blah</div>
</div>

<button class="copy" data-copy-element="content_1">
   Copy to clipboard
</button>

<div id="content_1">
   <div><b>Heading Post 1</b></div>
   <div>Blah, blah, blah</div>
</div>

<button class="copy" data-clipboard-element="#content_1">
   Copy to clipboard
</button>

标题栏1
废话，废话，废话
复制到剪贴板

---

请参阅fiddle:

这是我的最终代码，我使用了一点jQuery来获取与复制按钮相关的特定元素

JS

// copy to clipboard
new Clipboard('.copy');

new ClipboardJS('.copy', {
    text: function(trigger) {
        elem = $(trigger).data('clipboard-element');
        var htmlBlock = document.querySelector(elem);
        return htmlBlock.innerHTML;
    }
});

HTML

<div id="content_1">
   <div><b>Heading Post 1</b></div>
   <div>Blah, blah, blah</div>
</div>

<button class="copy" data-copy-element="content_1">
   Copy to clipboard
</button>

<div id="content_1">
   <div><b>Heading Post 1</b></div>
   <div>Blah, blah, blah</div>
</div>

<button class="copy" data-clipboard-element="#content_1">
   Copy to clipboard
</button>

标题栏1
废话，废话，废话
复制到剪贴板

---

请参见小提琴：

斑点清晰。。。真不敢相信我没看到，谢谢，我要试试这个漂亮的。。。真不敢相信我没看到，谢谢我要试一下