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

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

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

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

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

选择个人头像

昵称

邮箱

QQ

网址

评论提示

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