JavaScript 点击文字复制到剪切板

本文使用clipboard.js与jQuery库实现该功能，官网：Clipboard jQuery

1.clipboard.js安装：

​ ① npm安装；

npm install clipboard --save

​ ② 或下载zip文件后，指定js文件路径引用；

​ ③ 或使用CDN引入；

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

2.使用：

要使用clipboard.js，首先必须声明一个clipboard实例

let clipboard = new ClipboardJS('.btn');

假定在html中有一段需要实现“点击文本复制该段话”功能的文本：

<div id="summary" class="btn" data-clipboard-text="#"></div>

注：此处 id用于后续jQuery操作，可以选择性使用。class为clipboard.js实现功能所必须，故不能删去，class的内容在实例化clipboard对象时可以自定。data-clipboard-text为单击文本后复制到剪切板的文本内容，此处为了内容能以变量形式传入，其内容暂为空。

从外部引入显示和要复制的内容contents：

let contents = "你可以点击这段话来复制这段话";
$('#summary').html(contents);
$('#summary').attr("data-clipboard-text",contents);

最终效果：点击文本后，文本被复制到剪切板，功能成功实现。

参考资料：JavaScript | 文本复制工具clipboard.js的使用详解（使用clipboard复制ajax请求的数据）