编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

通用简单的网页内容复制控件clipboard.js的使用

wxchong 2024-06-28 10:53:49 开源技术 18 ℃ 0 评论

最近做的项目需要使用按钮复制功能,最后确定使用clipboard.js插件。原因:小巧,使用简单,不需要flash,纯js支持。

  1. 首先去官网(https://clipboardjs.com)下载clipboard.js的插件,然后引入到自己的项目里;

  2. 页面设置按钮,从服务器获取拼装好的url,然后返回;

3. 获取链接后,如果返回成功,会调用弹窗,我这里用的是art-dialog插件;

4. 弹窗页面和代码如下;

5. 点击“复制至剪贴板”会,调用copy_text方法,该方法需要当前点击按钮的id或者class,因为这个按钮是插件后期生成的,所以在浏览器里查看得到class是ui-dialog-autofocus;

6. 从官网下载的demo可以看到有很多的使用场景,我选的是function-text这个demo;

7. 结合项目的代码如下图;

8. 下图是复制后打印的log,实际复制的结果是text的值;

以上是浏览器内容复制的教程,是不是很简单!如果喜欢的话,请点击关注哦!

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表