当前位置：首页 > 前端 >

文本复制工具clipboard.js的使用详解

时间：2022-09-25 23:09:26浏览：1323 转载 

<!-- 该代码可直接创建HTML文件运行 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>function-text</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <!-- 1. 定义基本元素 -->
    <button class="btn">Copy</button>

    <!-- 2. 引入库文件 -->
    <!--  <script src="../dist/clipboard.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

    <script>
      //3. 实例化clipboard
      var clipboard = new ClipboardJS('.btn', {
        text: function () {
          return '这里的文本将被复制';
        },
      });

      //复制成功响应
      clipboard.on('success', function (e) {
        console.log(e);
      });

      //复制失败响应
      clipboard.on('error', function (e) {
        console.log(e);
      });
    </script>
  </body>
</html>


上一篇：用JS如何判断网页被刷新
下一篇：Python网络爬虫——获取cookie的方法

发表评论

昵称：  验证码：

关于博主

博主

博主：BlueCode

职业：web程序

简介：2002年开始一直从事Web制作，网站运营，会PHP+MYSQL ASP+MSSQL，微信开发

  • Linux文章
  • PHP文章
  • 随机文章