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获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
理理Vue细节(推荐)
Apr 16 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 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
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
js 操作css实现代码
2009/06/11 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
中学生打架检讨书
2014/02/10 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
高中班主任评语
2014/12/30 职场文书
会议开幕词
2015/01/28 职场文书
毕业生个人总结
2015/02/28 职场文书
企业团队精神心得体会
2016/01/19 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android