文本拷贝插件——clipboard.js 文本复制插件

yuyutoo 2024-10-13 00:35 3 浏览 0 评论

clipboard.js是一款强大且实用的文本拷贝插件, 目前github的stars量30K以上

中文文档:

http://www.clipboardjs.cn/

1、通过npm工具安装

npm install clipboard --save

2、html文件直接导入

github搜索clipboard直接下载源码文件包

<script src="js/clipboard.min.js"></script>

也可以使用CDN

<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script>

现在需要通过传递一个DOM选择器、一个HTML标签或者一组HTML标签来实例化它

new ClipboardJS('.btn'); //通过类名.btn的元素实例化

HTML代码：

<div>
<!--需要被复制的对象1-->
推荐码：<span>123456</span>
</div>
<p>
<!--需要被复制的对象2-->
账号：<input type="text" value="654321" />
</p>
<button>复制按钮</button>

JS代码:

//绑定点击事件
document.querySelector('button').onclick = copy();
function copy() {
//通过function复制
var clipboard = new Clipboard('button', {
// 通过target选择需要被复制的对象
target: function() {
return document.querySelector('span'); //复制标签文本
//return document.querySelector('input'); 复制文本框的值
}
});
clipboard.on('success', function(e) {
//复制成功之后的回调
console.log(e);
//提示：这里是个坑,需要手动销毁当前的clipboard,否则会触发两次事件
clipboard.destroy();
});
clipboard.on('error', function(e) {
//执行失败后需要做的事...
console.log(e);
clipboard.destroy();
});
}

clipboard

上一篇：在网页上优雅的粘贴复制clipboard.js
下一篇：微软改进Windows Clipboard:支持Emoji等引入“粘贴为纯文本”选项

文本拷贝插件——clipboard.js 文本复制插件

相关推荐

取消回复欢迎你发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源带详细搭建教程

文本拷贝插件——clipboard.js 文本复制插件

相关推荐

取消回复欢迎 你 发表评论:

前端面试:iframe 的优缺点? iframe有那些缺点

带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?

漫学笔记之PHP.ini常用的配置信息

其实模版网站在开发工作中很重要，推荐几个参考站给大家

推荐7个模板代码和其他游戏源码下载的网址

[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗

正在学习使用python搭建自动化测试框架?这个系统包你可能会用到

织梦(Dedecms)建站教程 织梦建站详细步骤

【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)

2024PHP在线客服系统源码+完全开源 带详细搭建教程

取消回复欢迎你发表评论:

织梦(Dedecms)建站教程织梦建站详细步骤

2024PHP在线客服系统源码+完全开源带详细搭建教程