H5 js点击按钮复制文本到粘贴板

更新时间：2020年11月19日 12:01:49 作者：武当山道士

这篇文章主要为大家详细介绍了H5 js点击按钮复制文本到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码，供大家参考，具体内容如下

准备：先去下载clipboard.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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

5个让你眼前一亮的JavaScript装饰器技巧
JavaScript 装饰器是一种特殊的功能，允许在不修改源代码的情况下动态修改类和函数的行为，本文将介绍五个让你眼前一亮的装饰器技巧，包括装饰函数参数、装饰类属性、装饰函数返回值和装饰函数调用,需要的朋友可以参考下
2023-06-06
js+css实现增加表单可用性之提示文字
平常设计表单的时候，我们会加入一些提示文字，最常见的做法是利用value来设置，下面与大家分享一个实例，感兴趣的朋友可以参考下哈
2013-06-06
webpack 打包后图片加载报错的解决办法
使用webpack打包后,图片没有加载出来,页面空白,报错图片引用的路径不对,本文给大家介绍webpack 打包后图片加载报错的解决办法,感兴趣的朋友一起看看吧
2024-03-03
微信小程序连续旋转动画（this.animation.rotate）详解
这篇文章主要介绍了微信小程序连续旋转动画（this.animation.rotate）详解的相关资料,需要的朋友可以参考下
2017-04-04
微信公众号平台接口开发获取微信服务器IP地址方法解析
这篇文章主要介绍了微信公众号平台接口开发获取微信服务器IP地址方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
JS实现盒子拖拽效果
这篇文章主要为大家详细介绍了JS实现盒子拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
关于base64编码和解码的js工具函数
这篇文章主要介绍了关于base64编码和解码的js工具函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
JS作用域深度解析
这篇文章主要为大家详细介绍了JS作用域，剖析JS的作用域问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JS实现获取各种格式的时间
在 JavaScript 中，可以使用内置的 Date 对象来获取当前时间，并根据需要格式化成不同的时间格式，下面就跟随小编一起来看看具体的使用吧
2023-08-08
Lottie动画前端开发使用技巧
这篇文章主要为大家介绍了Lottie动画前端开发使用技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06