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.已知 ...
随机推荐
- Mysql注入攻击与防御(思维导图笔记)
- 无网络环境下使用docker加载镜像
无网络环境下使用docker加载镜像 你需要做的主要有3步骤: 先从一个有网络的电脑下载docker镜像 [root@localhost ~]# docker pull hub.c.163.com ...
- 精读 SBAR SDN flow-Based monitoring and Application Recognition
目录 架构 测量模块 分类模块 具体实现 实验:最后接入巴塞罗那的校园网流量测试: SBAR: SDN flow-Based monitoring and Application Recognitio ...
- 如何弹出WiFi提示列表。
如果你的程序中用到了WiFi,想在没有有效WiFi的时候出现如图所示的提示该怎么做? 其实很简单, 只需要在Info.plist中添加如下Key/Value UIRequiresPersistentW ...
- Linux文本处理
作为一名 Linux 研发人员,几乎每天都要面对文本处理场景. 因此 掌握文本处理套路 并 熟练运用文本处理命令 ,对于 提升工作效率 意义重大. 本文以一个实战例子抛砖引玉,介绍如何运用 grep ...
- 为什么我不再用 .NET 框架(网摘)
觉得好就拿过来收藏了,保留出处链接-凌风 2017年08月23日 14:51:32 hisense_大致若愚 阅读数:9355 .NET平台很棒.真的很棒.直到它不再那么棒.我为什么不再用.NET?简 ...
- 在Red Hat Enterprise Linux 7.3上安装SQL Server 2017
必要条件: 1.在此快速安装过程中,您需要安装SQL Server 2017或SQL Server 2019上Red Hat Enterprise Linux (RHEL) 7.3 +.然后使用sql ...
- Mac 10.8.5 上运行cgi
搭配置搭了好久,花了近半天时间,有必要把过程记录下. 本文已同步到 icocoa.tk, 欢迎访问 Mountain Lion上Setting设置里已经取消了web share,必须要自己启动apac ...
- Oracle 表空间、段、区和块简述
数据块(Block) 数据块Block是Oracle存储数据信息的最小单位.注意,这里说的是Oracle环境下的最小单位.Oracle也就是通过数据块来屏蔽不同操作系统存储结构的差异.无论是Windo ...
- ABAP术语-XML
XML 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/21/1115743.html The "eXtensible Markup ...