JS插件clipboard.js实现一键复制粘贴功能


Posted in Javascript onDecember 04, 2020

一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js。

官网地址

下载到本地后,将其放入项目中,直接引用即可。具体实现代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>一键复制粘贴</title>
 <style>
 .transfer {
 width: 90%;
 margin: 20px auto;
 font-size: 18px;
 }
 .transfer button {
 margin-top: -5px;
 float: right;
 margin-left: 10px;
 background-color: rgb(3, 169, 244);
 width: 30%;
 height: 25px;
 font-size: 14px;
 color: white;
 border: 0;
 border-radius: 8%;
 }
 </style>
 </head>
 
 <body>
 <div class="transfer">
 支付宝:<span id="zfb_account">11111111111</span>
 <button onclick="copy1()" data-clipboard-action="copy" data-clipboard-target="#zfb_account" id="copy_zfb">一键复制</button>
 </div>
 <div class="transfer">
 微信:<span id="wx_account">2222222</span>
 <button onclick="copy2()" data-clipboard-action="copy" data-clipboard-target="#wx_account" id="copy_wx">一键复制</button>
 </div>
 <input type="text" />
 </body>
 
 <script type="text/javascript" src="../js/clipboard.min.js"></script>
 <script>
 function copy1() {
 var clipboard = new Clipboard('#copy_zfb');
 clipboard.on('success', function(e) {
 e.clearSelection(); //选中需要复制的内容
 alert("复制成功!");
 });
 clipboard.on('error', function(e) {
 alert("当前浏览器不支持此功能,请手动复制。")
 });
 }
 
 function copy2() {
 var clipboard = new Clipboard('#copy_wx');
 clipboard.on('success', function(e) {
 e.clearSelection(); //选中需要复制的内容
 alert("复制成功!");
 });
 clipboard.on('error', function(e) {
 alert("当前浏览器不支持此功能,请手动复制。")
 });
 }
 </script>
 
</html>

效果图:

JS插件clipboard.js实现一键复制粘贴功能

注意:如果你在项目中使用了其他的前端框架或者插件,有可能会与clipboard.js插件产生冲突。解决方法,可以使用<iframe/>标签,将此部分代码放在一个新的html文件中,然后在主文件中使用<iframe/>标签引入。

前端复制粘贴clipBoard.js的使用

<!DOCTYPE html>
<html>
<head>
 <title>ClipBoard.js使用:修改HTML</title>
 <meta charset="utf-8">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
</head>
<body>
<!--案例一:从另一元素复制文本:通过data-clipboard-target在触发器中添加属性来实现-->
<input type="text" id="input">
<button id="copy" data-clipboard-target="#input">复制input框中的内容</button>
<textarea name="" id="" cols="30" rows="10"></textarea>


</body>
</html>
<script type="text/javascript">
 var clipboard = new ClipboardJS('#copy')
 // 显示用户反馈/捕获复制/剪切操作后选择的内容
 clipboard.on('success', function (e) {
  console.info('Action:', e.action)//触发的动作/如:copy,cut等
  console.info('Text:', e.text);//触发的文本
  console.info('Trigger:', e.trigger);//触发的DOm元素
  e.clearSelection();//清除选中样式(蓝色)
 })
 clipboard.on('error', function (e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
 });

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
iScroll.js 使用方法参考
May 16 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
js继承实现方法详解
Dec 16 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
Vue的props父传子的示例代码
May 20 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 Javascript
js实现图片上传并预览功能
Aug 06 #Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 #Javascript
微信小程序网络封装(简单高效)
Aug 06 #Javascript
json字符串传到前台input的方法
Aug 06 #Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 #Javascript
react-native使用leanclound消息推送的方法
Aug 06 #Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 #Javascript
You might like
php 冒泡排序 交换排序法
2011/05/10 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
JS中Iframe之间传值的方法
2013/03/11 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
Python内置数据类型详解
2014/08/18 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
小学英语教学反思
2014/01/30 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
呐喊读书笔记
2015/06/30 职场文书
python实现高效的遗传算法
2021/04/07 Python
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技