所属分类 WEB

clipboard.js

clipboard.js 是一个网页一键复制插件。

clipboard.js 不需要数十个步骤来配置或数百 KB 的依赖JS，易用、精简。

clipboard.js 不依赖于 Flash 或任何臃肿的框架。

官网地址：https://clipboardjs.com/

兼容性

/static/upload/post/1647476281896.png

下载使用

通过 npm 下载依赖。

npm install clipboard --save

也可以直接下载，在HTML中引用。

/static/upload/post/1647476412094.png

下载的压缩包是完整的 Git 仓库代码，你只需要使用 dist 目录的内容即可。

使用案例

官网已经提供了详细使用案例，本文取常用的部分示例。

本文使用的 CDN 直接引用模式。

DEMO地址：http://demo.mebugs.com/clipboard

引入

  <!-- clipboard.js依赖 -->
  <script src="dist/clipboard.min.js"></script>

案例

绑定元素案例

支持从 input 框或者 textarea 复制剪切数据。

<!-- 从input框中复制具体的值 -->
<div class="dm">
  <input id="d1" value="COPY:www.mebugs.com">
  <button class="btn btn1" data-clipboard-target="#d1">复制</button>
</div>
<!-- 从input框中剪切具体的值 -->
<div class="dm">
  <input id="d2" value="CUT:www.mebugs.com">
  <button class="btn btn2" data-clipboard-action="cut" data-clipboard-target="#d2">剪切</button>
</div>
<!-- clipboard.js依赖 -->
<script src="dist/clipboard.min.js"></script>
<script>
  // demo1 从input框中复制具体的值
  new ClipboardJS('.btn1');
  // demo2 执行剪切行为
  new ClipboardJS('.btn2');
</script>

直接指定复制值

<!-- 无需绑定其他元素，自身指定复制值 -->
<div class="dm">
  <button class="btn btn3" data-clipboard-text="COPY SELF:www.mebugs.com">复制指定值</button>
</div>
<!-- clipboard.js依赖 -->
<script src="dist/clipboard.min.js"></script>
<script>
  // demo3 自身指定复制值
  new ClipboardJS('.btn3');
</script>

自定义实现

利用钩子函数完成自定义的实现。

<!-- 追加自定义的执行逻辑 -->
<div class="dm">
  <button class="btn btn4" data-clipboard-text="COPY SELF:www.mebugs.com">复制并弹窗</button>
</div>
<!-- clipboard.js依赖 -->
<script src="dist/clipboard.min.js"></script>
<script>
  // demo4 追加自身的执行逻辑
  var btn4 = new ClipboardJS('.btn4'); 
  // 成功函数
  btn4.on('success', function(e) {
    alert("复制行为："+e.action);
    alert("复制内容："+e.text);
    //alert("复制节点："+e.trigger);
  });
  // 失败函数
  btn4.on('error', function(e) {
    alert("复制失败");
  });
</script>