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 相关文章推荐
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
微信小程序实现城市列表选择
2018/06/05 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python分割文件的常用方法
2014/11/01 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python 实现二维列表转置
2019/12/02 Python
keras输出预测值和真实值方式
2020/06/27 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
志愿者宣传口号
2014/06/17 职场文书
创先争优标语
2014/06/27 职场文书
办公室文员岗位职责
2015/02/04 职场文书
运动会宣传稿100字
2015/07/23 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书