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变量
May 25 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
vue实现微信获取用户信息的方法
Mar 21 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
token 机制和实现方式
2020/12/15 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
自动化专业个人求职信范文
2013/12/30 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
工业设计专业自荐书
2014/06/05 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
运动会演讲稿50字
2014/08/25 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
优秀英文求职信范文
2015/03/19 职场文书
优质服务标语口号
2015/12/26 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Python学习之异常中的finally使用详解
2022/03/16 Python