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插件实现一键复制功能的更多相关文章

  1. 一款给力的一键复制js插件-clipboard.js

    一款没有依赖的.给力的一键复制的JS插件   点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...

  2. 一键复制功能 - Vue

    经常遇到一键复制功能,简单记录一下.这里使用的是clipboard插件:https://clipboardjs.com/ 第一步 安装:npm install clipboard --save 第二步 ...

  3. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  4. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  5. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  6. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  7. Intense Images – 全屏浏览图像的 JS 插件

    Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和 ...

  8. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  9. 代码规范和常用的js插件以及测试工具

    1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...

随机推荐

  1. 通过css使文字有渐变的效果

    <style> .color{ background-image: -webkit-gradient(linear, left center, right center, from(rgb ...

  2. Emgu学习之(五)——图像模糊处理

    Visual Studio Community 2015 工程和代码:http://pan.baidu.com/s/1Qia0Q 内容 在这篇文章中将提到以下内容: 中值模糊 高斯模糊 图像模糊能有效 ...

  3. Java并发基础概念

    Java并发基础概念 线程和进程 线程和进程都能实现并发,在java编程领域,线程是实现并发的主要方式 每个进程都有独立的运行环境,内存空间.进程的通信需要通过,pipline或者socket 线程共 ...

  4. (转)ci

    1  从代码管理器签出源文件 2  修改代码 3  编译代码 4  遇到错误,转到2继续修改直到达到预期 5  运行单元测试,期望所有的测试绿色(通过) 6  单元测试出错,转入2 7  重构代码,按 ...

  5. ajax与websocket的区别以及websocket常用使用方式

    笔者近期在公司的项目中渐渐的接触了一些比较高级的业务逻辑处理,其中比较有意思的地方就是前端接受后台给与的推送问题. 一般前端与后端的交互主要是使用ajax进行异步操作调用交互,比较有趣的是这种交互方式 ...

  6. linux 命令 uniq

    linux命令uniq去重 实例详细说明linux下去除重复行命令uniq 一,uniq干什么用的 文本中的重复行,基本上不是我们所要的,所以就要去除掉.linux下有其他命令可以去除重复行,但是我觉 ...

  7. 课时87. !important(掌握)

    1.什么是important 作用:用于提升某个直接选中标签的选择器中的某个属性的优先级,可以将被指定的属性的优先级提升为最高. 注意点: 1.important只能用于直接选中,不能用于间接选中 p ...

  8. Flume(5)-Ganglia监控

    一. 安装Ganglia 1. 安装httpd服务与php sudo yum -y install httpd php 2. 安装其他依赖 sudo yum -y install rrdtool pe ...

  9. actor、reactor与proactor模型:高性能服务器的几种模型概念(转)

    actor模型: 实体之通过消息通讯,各自处理自己的数据,能够实现这并行. 说白了,有点像rpc. skynet是actor模型. reactor模型: 1 向事件分发器注册事件回调 2 事件发生 4 ...

  10. 旁听<基因编辑与精准医疗>(北京大学)

    昨天去北大生命科学院听了一场魏文胜教授关于基因方面的讲座.会场人不算太多,比起上次听城市规划,场面略显冷清.也能从一个侧面反映,关注基础科学领域的人虽然有,但是不是很多. 开场魏教授用了宣传海报作为导 ...