js插件实现一键复制功能
clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能。
使用方法:
1. 下载 clipboard.js,并在页面中引入该插件。clipboard.js 下载地址: https://github.com/zenorocha/clipboard.js
<script src="/lib/js/clipbaord.js"></script>
2. 需要复制的目标文本
<span id="tar_text" >我是一段需要被复制的文本</span>
3. 复制按钮(注:此处需要给触发复制时间的按钮添加两个属性,data-clipboard-action 及 data-clipboard-target,data-clipboard-target的属性值为目标文本的 id 值)
<button id="copy" data-clipboard-action="copy" data-clipboard-target="#tar_text">Copy My Invitation Address</button>
4. 实例化 Clipboard 对象
var clipboard = new Clipboard('#copy');
clipboard.on('success', function (e) {
alert("复制成功!");
});
clipboard.on('error', function (e) {
alert("对不起,您的浏览器暂不支持一键复制功能!");
});
js插件实现一键复制功能的更多相关文章
- 一款给力的一键复制js插件-clipboard.js
一款没有依赖的.给力的一键复制的JS插件 点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...
- 一键复制功能 - Vue
经常遇到一键复制功能,简单记录一下.这里使用的是clipboard插件:https://clipboardjs.com/ 第一步 安装:npm install clipboard --save 第二步 ...
- 【jQuery小实例】js 插件 查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
- jQuery.cookie.js插件了解及使用方法
jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...
- Intense Images – 全屏浏览图像的 JS 插件
Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和 ...
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
- 代码规范和常用的js插件以及测试工具
1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...
随机推荐
- programming-languages学习笔记--第3部分
programming-languages学习笔记–第3部分 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src ...
- Linux学习总结(十七)-shell 基础知识
一 先介绍几种常用字符: 1 * 匹配任意个任意字符2 ?匹配一个任意字符3 # 注释符号,符号后的语句不被执行4 \脱意字符,后面跟带含义字符时,照原字符输出5 []匹配包含在[]之中的任意一个字符 ...
- [转]MVP+WCF+三层结构搭建项目框架
最近,我一直在重构之前做的一个项目,在这个过程中感慨万千.原先的项目是一个运用了WCF的C/S系统,在客户端运用了MVC模式,但MVC的View.Model耦合以及WCF端分布式欠佳等问题让我有了重构 ...
- ThinkPHP5入门(一)----框架篇
一.命名规范: 下划线法: 函数的命名 配置参数 常量(大写) 数据表和字段 驼峰法: 属性的命名 方法的命名 帕斯卡法: 类名 类文件名 类的命名
- PAT——1030. 完美数列
给定一个正整数数列,和正整数p,设这个数列中的最大值是M,最小值是m,如果M <= m * p,则称这个数列是完美数列. 现在给定参数p和一些正整数,请你从中选择尽可能多的数构成一个完美数列. ...
- spring boot 输入参数统一校验
1 引入spring boot validate maven 依赖 <!-- 验证 --> <dependency> <groupId>org.hiberna ...
- .net core 实践笔记(一)--开篇
** 温馨提示:如需转载本文,请注明内容出处.** 本文链接:https://www.cnblogs.com/grom/p/9902000.html 最近无聊自己设计了一个小项目,基本都使用想用没用 ...
- 实现 在子界面的button按下,在主界面的label显示。
不知道理解的对不对,反正功能是实现了. 这是子界面,COM口配置界面的 .H文件的定义.下面的Private:定义了Ui:MainWindow *main_ui;的指针变量 要 注 ...
- 【转】如何快速定位JVM中消耗CPU最多的线程?
[转]如何快速定位JVM中消耗CPU最多的线程? https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247487802&id ...
- lrzsz Linux服务器Windows互传文件工具
lrzsz是一款在linux里可代替ftp上传和下载的程序,但只限于较小的文件,如果是目录需要打包成单个文件在实现下载. 条件:需要使用SecureCRT或者Xshell等客户端工具连接Linux 下 ...