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插件推荐浏览器嗅探userAgent
Nov 09 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
javascript中scrollTop详解
Apr 13 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
self.attachevent is not a function的解决方法
Apr 04 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python 二维数组90度旋转的方法
2019/01/28 Python
详解用python生成随机数的几种方法
2019/08/04 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Python远程方法调用实现过程解析
2020/07/28 Python
京东国际站:JOYBUY
2017/11/23 全球购物
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2014年大学生工作总结
2014/11/20 职场文书
储备店长岗位职责
2015/04/14 职场文书
推普标语口号大全
2015/12/26 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书