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. JQuery资源网站(收藏)

    收藏几个不错的JQuery资源网站,以后备用,给共享者点个赞!!! http://jquery.com/ http://www.htmleaf.com/ http://www.oschina.net/ ...

  2. fread与fread_s读取文件(二进制文件)

    fread()是c库函数,利于移植,使用缓存,效率较read()高. 原型: size_t fread(void *buffer, size_t size, size_t count, FILE * ...

  3. 基于mysql的基准测试

    常用的基准测试工具介绍: mysql基准测试工具: mysqlslap,mysql自带的工具,对于性能测试不建议使用 特点: 可以模拟服务器负载,并输出相关统计信息 可以指定也可以自动生成查询语句 常 ...

  4. QT 简单 TCP 通信,发送数据到服务器

    1.首先 添加头文件 #include <QtNetwork/QTcpSocket> 并且 在 xxx.pro(xxx指工程的名称) 中QT += core gui下面,添加 下面两句句话 ...

  5. javascript 使用 匿名 箭头函数 this的变化

    处理html 页面 <body> <div class="main"> <div class="up"> <div c ...

  6. Request和Response中文乱码问题的解决方案和区分

    首先,在刚接触这个中文乱码问题的时候,还是比较混乱的,因为针对request和response各自都有自己的解决方案,而且思路相似,方法也很相似,又针对get和post两种提交方式,分两种解决中文乱码 ...

  7. 给Extjs的window弹窗的关闭事件添加验证

    问题:我想在window点击右上角叉关闭时添加一些验证,来确定是否关闭? 实现: 首先想到的是拦截window的关闭事件,在它关闭前添加验证,但是有一个问题是,如何阻止它的关闭和组织关闭后,如何让它再 ...

  8. nginx+uwsgi+flask+supervisor 项目部署

    环境 - Linux: Ubuntu 16.04 - uWSGI 2.0.18 - Flask 1.0.2 - supervisor 3.2.0 - nginx/1.8.1 首先区分几个概念 WSGI ...

  9. less.js插件监听

    <script>less.watch();</script> 在不手动刷新/重新加载页面会自动监听less的变化,页面做出相应的变化 . 写在这两行后面就好 了 <lin ...

  10. 使同一个server上不同port的django应用可在同一个浏览器上打开

    如果我们有两个django应用site1和site2同时跑在同一个server的不同端口,同时我们在同一个浏览器的不同tab登录.那么这时就出出现这种情况,当我们登录site2时就会将site1上登录 ...