clipboard.js实现一键复制

clipboard.js相比早期基于flash制作的一键复制插件具有更好的兼容性,关键对于手机浏览器支持良好,无需其他依赖,使用简单,并且提供了钩子函数用于自定义的实现

所属分类 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>

更多

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

官网提供了更多案例。

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

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

Jquery中.attr()和.prop()方法

Jquery中使用attr()方法动态设置多选框被选中状态时不生效或需要操作多次方可生效的问题可通过prop()替代完成,当需要设置html原生属性时最好使用prop()方法来进行操作

Vue3中无需引入Vuex的替代方案

Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代

Jquery+CSS3实现网页入场动画特效

多数网站首页的数据往往是最庞大的,三到五秒打开都算比较优秀,因此设置一个开场(预加载)动画特效能够大幅度提升用户感官体验,这里分享本站使用的加载动画,整体比较简约清新

Jquery1.7+绑定事件on()方法使用案例

Jquery绑定事件后很多中方式bind()、live()、delegate()、on(),实际应用中比较推荐采用on()的方式去处理,具有较高的自定义组合能力,本文对on()详解

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核