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. PAT——1054. 求平均值

    本题的基本要求非常简单:给定N个实数,计算它们的平均值.但复杂的是有些输入数据可能是非法的.一个“合法”的输入是[-1000,1000]区间内的实数,并且最多精确到小数点后2位.当你计算平均值的时候, ...

  2. Android 面试题之编程

    1.排序 package cn.java.suanfa; public class SuanFa { public static void main(String[] args) { int[] ar ...

  3. DBA手记-BBED 的说明

    在10g中连接生成bbed:cd $ORACLE_HOME/rdbms/libmake -f ins_rdbms.mk $ORACLE_HOME/rdbms/lib/bbed 11g中缺省未提供BBE ...

  4. Ext JS 6和Sencha CMD 6 快速入门

    Ext JS 6和Sencha CMD 6的入门很简单.一个命令,即可生成一个功能完整的“通用”应用程序,可以运行在本地服务器上. 这个“通用”的应用程序包含一组核心的stores,模型(models ...

  5. C++编译器是如何管理类和对象的,类的成员函数和成员变量

    C++中的class从面向对象理论出发,将变量(属性)和函数(方法)集中定义在一起,用于描述现实世界中的类.从计算机的角度,程序依然由数据段(栈区内存)和代码段(代码区内存)构成. #include ...

  6. #leetcode刷题之路16-最接近的三数之和

    给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案. 例如,给定数 ...

  7. 阿里云CentOS7部署ASP.NET Core

    本文主要介绍了阿里云CentOS7下如何成功的发布ASP.Core应用并使用nginx进行代理, 并对所踩的坑加以记录; 环境.工具.准备工作 服务器:阿里云64位CentOS 7.4.1708版本; ...

  8. pomelo vscode 调试配置

    步骤 config/server.js 配置 .vscode/launch.json 配置 详细 1. 在server的配置中添加 args 参数,此参数为node开启此服务器时命令参数 " ...

  9. 07.centos7构建 IntelliJ IDEA(简称IDEA)开发环境

    一.安装IDEA 进入官网下载linux版的社区便,IDEA分为社区版和旗舰版,社区版免费,并且基本满足spark开发需求. 解压安装 目录为/opt/idea 注意:centos命令行界面下是无法安 ...

  10. 100-Days-Of-ML-Code 评注版(Day 3)

    Day3_Multiple_Linear_Regression(多元线性回归) 本文引用自 Multiple_Linear_Regression, 对其中内容进行了评注与补充说明. 回归分析是一种预测 ...