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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
vue中使用props传值的方法
May 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
第二节 对象模型 [2]
2006/10/09 PHP
学习php笔记 字符串处理
2010/10/19 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
原生js二级联动效果
2017/06/20 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
jQuery中extend函数简单用法示例
2017/10/11 jQuery
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python实现的计算器功能示例
2018/04/26 Python
python实现音乐下载的统计
2018/06/20 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
团购业务员岗位职责
2014/03/15 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
毕业典礼主持词
2015/06/29 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书