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. 3、Dubbo-环境搭建

    官方推荐使用 Zookeeper 注册中心 3.1).[windows]-安装zookeeper 开发中均在Linux中安装!!! 1.下载zookeeper 网址 https://archive.a ...

  2. Nginx Web服务器配置

    Nginx是一个轻量级高性能的web服务器,它是为快速响应大量静态文件请求和高效利用系统资源而设计的.与apache使用面向进程或线程的方式处理请求不同,nginx使用异步事件驱动模型在连接高并发的情 ...

  3. Level/levelup-1-简介

    https://github.com/Level/levelup A node.js wrapper for abstract-leveldown compliant stores 一个为实现抽象le ...

  4. Exp6 信息收集与漏洞扫描 20164314

    一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 3.基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务 ...

  5. 通讯协议(三)Protocol Buffers协议

    Protocol Buffers是Google开发一种数据描述语言,能够将结构化数据序列化,可用于数据存储.通信协议等方面. 不了解Protocol Buffers的同学可以把它理解为更快.更简单.更 ...

  6. uva 10369 Arctic Network (最小生成树加丁点变形)

    The Department of National Defence(DND)wishestoconnectseveral northern outposts by a wireless networ ...

  7. OC字符串处理

    接到一个需求, 现有多个品牌的商品,使用字符串保存已选中的品牌,使用','隔开,可以反选. 分析问题可知: 1. 字符串由多个品牌名字组成,由 ',' 隔开. 2.如果选中的品牌不在字符串内,则拼接到 ...

  8. Angular7教程-04-Angular常用操作(下)

    6. 数据双向绑定 视图和数据,只要一方发生变化,另一方跟着变化. 好处是不需要在代码中手动更新视图,简化开发,增加代码内聚性,代码可读性更强. 缺点是当绑定的数据层次深.数据量大时,会影响性能. 双 ...

  9. ie浏览器报 promise 问题

    1.首先安装:babel-polyfill    npm install babel-polyfill --save2.然后引入:babel-polyfill 在build目录下,webpack.ba ...

  10. python3 datetime和time获取当前日期和时间

    import datetime import time # 获取当前时间, 其中中包含了year, month, hour, 需要import datetime today = datetime.da ...