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 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
ReactRouter的实现方法
Jan 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
PHP 使用redis简单示例分享
2015/03/05 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
python使用生成器实现可迭代对象
2018/03/20 Python
python 异或加密字符串的实例
2018/10/14 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
softmax及python实现过程解析
2019/09/30 Python
python属于解释型语言么
2020/06/15 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书