H5 js点击按钮复制文本到粘贴板


Posted in Javascript onNovember 19, 2020

本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下

准备:先去下载clipboard.js: 官网
移动端效果如下:

H5 js点击按钮复制文本到粘贴板

应用:html+js 代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >
  <script src="/res/js/jquery.min.js"></script>
  <script type="text/javascript" src="/res/js/clipboard.min.js"></script>
  <style>

    body{
      font-weight: 300;
    }
    .code-box{
      border-radius: 5px;
      background: #f0830f;
      height: 80px;
      text-align: center;
    }
    .my-code{
      height: 20px;
      line-height: 20px;
      margin-top: 10px;
     }
    .btn-copy{
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      font-weight: 400;
      font-size: 14px;
      background-color: #fff1c8;
      color:#F06D4A;
      width: 40%;
      margin: 5px 30%;
    }
  </style>
</head>
<body>
    <div class="text-center">—— 复制邀请码,好礼领回家 ——</div>
    <div class="code-box">
      <div class="my-code" id="code">{$code}</div>
      <div class="btn-copy" id="codeBtn" data-clipboard-target="#code">复制邀请码</div>
    </div>

    <script>
     $(".btn-copy").click(function(){
     //实例化clipboard
     var clipboard = new ClipboardJS('#codeBtn');
     clipboard.on("success", function(e){
       alert('复制成功');
       e.clearSelection();
       clipboard.destroy(); // 如果不销毁,第一次以后的复制,会有重复的alert弹出
     });
     clipboard.on("error", function(e){
       alert("复制失败,请手动复制!");
       clipboard.destroy(); // 如果不销毁,第一次以后的复制,会有重复的alert
     });
   });
  </script>
</body>
</html>

注意:

一定要销毁对象 clipboard.destroy();
如果不销毁,第一次以后的复制,会有重复的alert

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

Javascript 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
JS实现时间校验的代码
May 25 Javascript
JS数据类型分类及常用判断方法
Nov 19 #Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 #Javascript
javascript this指向相关问题及改变方法
Nov 19 #Javascript
JavaScript实现alert弹框效果
Nov 19 #Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
原生js实现自定义消息提示框
Nov 19 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
Maps Javascript
2007/01/22 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
chrome调试javascript详解
2015/10/21 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python中装饰器的一个妙用
2015/02/08 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python常见异常分类与处理方法
2017/06/04 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python 同时运行多个程序的实例
2019/01/07 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python匿名函数用法实例分析
2019/08/03 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
以太网Ethernet IEEE802.3
2013/08/05 面试题
50道外企软件测试面试题
2014/08/18 面试题
大学生专科学习生活的自我评价
2013/12/07 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript