用clipboard.js实现纯JS复制文本到剪切板
以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它。ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器不支持flash,导致一些没法正常使用了。
今天火端开始使用clipboard.js来复制网页文本内容了,clipboard.js不需要flash,也不依赖其它的js库,min版仅11KB,GZIP压缩后仅3KB,非常的小巧。
使用起来也非常的简单,代码如下:
<input id="foo" value="这里是内容"> <button class="btn" data-clipboard-target="#foo">点击复制</button> <script src="dist/clipboard.min.js"></script> <script> new Clipboard('.btn');//首先需要您需要通过传递DOM选择器,HTML元素或HTML元素列表来实例化它。 <script>
如果要添加事件,可以这样:
<input id="foo" value="这里是内容"> <button class="btn" data-clipboard-target="#foo">点击复制</button> <script src="dist/clipboard.min.js"></script> <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { alert("复制成功!"); e.clearSelection(); }); clipboard.on('error', function(e) { alert("复制失败!"); }); <script>
支持的浏览器如下:
还有更多例子以及下载请看官网:https://clipboardjs.com/
或者直接下载:https://github.com/zenorocha/clipboard.js/archive/master.zip
本文地址:https://www.huoduan.com/clipboardjs.html
本文作者:火端网络,转载请务必以超链接形式注明出处。
clipboard.js基本使用:http://www.jianshu.com/p/3f8867de041e
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
2016-11-07 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序。