学习了clipboard复制剪切插件的使用
第一步：引入clipboard插件JS
<script src="dist/clipboard.min.js"></script>
第二步：在HTML代码加入clipboard相关属性
<!DOCTYPE html> <html> <head> <title>测试页面</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="/js/clipboard.min.js" type="text/javascript"></script> </head> <body> <div id="clip" class="clip" data-clipboard-action="copy" data-clipboard-target=".clip" data-clipboard-text="在这里填写要复制的内容也可以">这里填写要复制的内容</div> </body> <script> var clipboard = new ClipboardJS('.clip'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </html>
其中data-clipboard-target、data-clipboard-text、data-clipboard-action是clipboard插件自带的属性，id和class可以自己任选一个用来调用要复制的HTML标签。
data-clipboard-target：是用来绑定要复制的目标HTML标签，可以是class或id；
data-clipboard-text：是用来设置要复制或者剪切的文本内容的属性；
data-clipboard-action：是用来设置复制或者剪切事件的，可以是copy或cut，如不填默认为copy；
我们可以实例化一个ClipboardJS类，用on绑定clipboard自带的成功和失败事件，用console.log打印出插件的相关参数进行调试。
注意：亲自测试发现在某些情况下如果没有设置data-clipboard-text属性会出现不能正常复制内容的情况，可以用data-clipboard-text设置要复制的内容从而解决问题。
在使用过程中如遇到困难欢迎在下方留言咨询，看到后第一时间进行回复。谢谢。
附上clipboard插件的官网链接：https://clipboardjs.com/
网站：http://shibowl.top
github：https://github.com/hanbinjxnc
博客园：https://www.cnblogs.com/hool
博客：https://blog.shibowl.top
淘宝店：https://boxunwl.taobao.com/
作者：世博 2019-04-16 16:52
github：https://github.com/hanbinjxnc
博客园：https://www.cnblogs.com/hool
博客：https://blog.shibowl.top
淘宝店：https://boxunwl.taobao.com/
作者：世博 2019-04-16 16:52
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具