js复制html到粘贴板,用clipboard.js实现纯JS复制文本到剪切板

以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它。ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器不支持flash,导致一些没法正常使用了。

今天火端开始使用clipboard.js来复制网页文本内容了,clipboard.js不需要flash,也不依赖其它的js库,min版仅11KB,GZIP压缩后仅3KB,非常的小巧。

使用起来也非常的简单,代码如下:

点击复制

new Clipboard('.btn');

如果要添加事件,可以这样

点击复制

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {

alert("复制成功!");

e.clearSelection();

});

clipboard.on('error', function(e) {

alert("复制失败!");

});

支持的浏览器如下:

format,png

还有更多例子以及下载请看官网:https://clipboardjs.com/

或者直接下载:https://github.com/zenorocha/clipboard.js/archive/master.zip

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/508042.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机设备的存放,计算机硬件储存设备与网络储存的发展现状

计算机的出现,改变了人们的生活和生产,而计算机硬件技术的发展,则为计算机储存开辟了新的发展方向和途径。而随着时代的进步,计算机储存技术的发展也是日新月异,现在我们所使用的云储存技术,就是储存技术发…

计算机键盘没有fn,键盘Fn键失灵怎么解决?键盘Fn键失灵的修复方法

电脑键盘是电脑输入设备中最常用的设备之一,也是大家使用最频繁的的设备。其实键盘Fn键占据着很大分量,Fn键能够实现很多功能,如控制音量、打开关闭摄像头、屏幕亮度调节等。如果Fn键失灵的话,那就会对电脑造成很大的影响,有什么办法修复?下面…

网站的服务器分哪几种,服务器有哪几种分类?_服务器可分为四种类型

办事器能够按使用分:OA办事器、数据库办事器、流媒体办事器、高机能计较办事器、逛戏办事器等。软盘接口是软盘取从机系统间的毗连部件,感化是正在软盘缓存和从机内存之间传输数据。分歧的软盘接口决定灭软盘取计较机之间的毗连速度,正在零个…

英雄联盟服务器维护3月17,英雄联盟将于3月17日凌晨2点开始进行全区停机维护...

原标题:英雄联盟全区停机维护公告英雄联盟将于3月17日凌晨2点开始进行全区停机维护,公告如下:我们将于3月17日2点开始全区停机维护以进行后台服务升级,预计在凌晨1点关闭排位赛入口,不会影响正在进行中的排位赛。预计停…

网站服务器时间秒杀,Javascript实现商品秒杀倒计时(时间与服务器时间同步)...

现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时。关于倒计时,有下面几点需要注意:1.应该使用服务器时间而不是本地时间(本地时间存在时区不同、用户自行设置等问题)。2.要考虑网络传输的耗时。3.获取时间时可直接从AJAX…

i7 8700 服务器系统,i7 8700k 云服务器

i7 8700k 云服务器 内容精选换一换您可以在几分钟之内快速获得基于公有云平台的弹性云服务器设施,并且这些设施是弹性的,可以根据需求伸缩。该任务指导用户如何创建支持IB网卡的弹性云服务器,包括管理控制台方式和基于HTTPS请求的API(Applica…

(教程)2020最新windows10/anaconda/pytorch-gpu环境配置(附CUDA/cuDNN配置)

(教程)2020最新windows10/anaconda/pytorch-gpu环境配置(附CUDA/cuDNN配置) 环境:windows10 nvidia 165ti 1. 安装anaconda3,自行安装 https://www.anaconda.com/download/ 安装完成后,配置…

信息论 哈夫曼编码 与 菲诺编码的实现(对一幅BMP格式的灰度图像(个人 证件照片)进行二元霍夫曼编码和译码。并进行编码效率的计算,对一幅BMP格式的灰度图像进行二 元Fano编码、译码 )

信息论 哈夫曼编码 与 菲诺编码的实现(对一幅BMP格式的灰度图像(个人 证件照片)进行二元霍夫曼编码和译码。并进行编码效率的计算,对一幅BMP格式的灰度图像进行二 元Fano编码、译码 ) 原始图片 灰度处理 编码生成的…

教你如何使用hexo以及nginx、github搭建属于自己的博客(操心的妈妈级教学)

教你如何使用hexo以及nginx、github搭建属于自己的博客(妈妈级教学) ~~ 1.解释一下你要的服务器的效果以及对应的操作 ~~ 首先你要有自己的一台服务器,可以是云服务器,或者你可以用自己的电脑作为服务器,&#xff0…

(菜鸟入门)使用pytorch框架实现前馈神经网络

前馈神经网络 常见的前馈神经网络有感知机(Perceptrons)、BP(Back Propagation)网络等。前馈神经网络(FNN)是人工智能领域中最早发明的简单人工神经网络类型。各神经元分层排列。每个神经元只与前一层的神经元相连。接收前一层的…

Windows下如何如何将项目上传至GitHub?

安装git客户端 进入官网,点击右侧下载windows版本的软件包 如果下载慢的话,给一个传送门,可以快速下载: 双击安装 一直点击下一步就可,安装位置可以自己选择一下 Github创建仓库 填写项目名称以及ba…

(pytorch-深度学习系列)pytorch卷积层与池化层输出的尺寸的计算公式详解

pytorch卷积层与池化层输出的尺寸的计算公式详解 注:这篇blog写的不够完善,在后面的CNN网络分析padding和stride详细讲了公式,感兴趣的可以移步这里:卷积神经网络中的填充(padding)和步幅(stride) 要设计卷积神经网络的结构&…

idea创建springboot项目,一直在reading pom.xml

problem:遇到的问题 idea创建springboot项目,一直在reading pom.xml 解决方法有三种: (1)修改windows配置文件 c;\windows\System32\drivers\etc\hosts将12.0.0.1 localhost前的注释符号#去掉 (2&#x…

springboot 项目实战 基本框架搭建(IDEA)

springboot 项目实战 基本框架搭建(IDEA) IDEA下载 我使用的是破解的专业版IDEA,使用权一直到2089年: 下载IDEA: 下载processional版本,然后百度搜索激活码即可概率激活,如果你不成功就多找几个激活码 配…

使用IDEA 连接mysql数据库,执行sql指令

使用IDEA 连接mysql数据库,执行sql指令 1 配置项目的SQL依赖 首先参考这篇博文,创建springboot的基本框架 在创建项目的过程中,需要选择SQL相关的依赖,如下: SQL勾选:MySQL Driver,JDBC API …

thymeleaf There was an unexpected error (type=Internal Server Error, status=500).

thymeleaf There was an unexpected error (typeInternal Server Error, status500). 使用thymeleaf依赖&#xff0c;无法访问html文件&#xff0c;解决方法有以下几种可能&#xff1a; 1. 未加载thymeleaf依赖&#xff0c;打开pom.xml&#xff0c;加入依赖&#xff1a; <…

org.attoparser.ParseException: Could not parse as expression: “

Caused by: org.attoparser.ParseException: Could not parse as expression: " {field: ‘id’, title: ‘ID’, fixed: ‘left’, unresize: true, sort: true} , {field: ‘number’, title: ‘学号’, edit: ‘number’, sort: true} , {field: ‘name’, title: ‘姓…

(pytorch-深度学习系列)pytorch中backwards()函数对梯度的操作

backwards()函数对梯度的操作 对于一个新的tensor来说&#xff0c;梯度是空的&#xff1b;但当对这个tensor进行运算操作后&#xff0c;他就会拥有一个梯度&#xff1a; x torch.ones(2, 2, requires_gradTrue) print(x) print(x.grad_fn)y x 2 print(y) print(y.grad_fn)…

(pytorch-深度学习系列)pytorch实现线性回归

pytorch实现线性回归 1. 实现线性回归前的准备 线性回归输出是一个连续值&#xff0c;因此适用于回归问题。回归问题在实际中很常见&#xff0c;如预测房屋价格、气温、销售额等连续值的问题。 与回归问题不同&#xff0c;分类问题中模型的最终输出是一个离散值。我们所说的图…

(pytorch-深度学习系列)pytorch实现多层感知机(手动定义模型)对Fashion-MNIST数据集进行分类-学习笔记

pytorch实现多层感知机对Fashion-MNIST数据集进行分类&#xff08;手动定义模型&#xff09; 多层感知机&#xff1a; 多层感知机在单层神经网络的基础上引入了一到多个隐藏层&#xff08;hidden layer&#xff09;。隐藏层位于输入层和输出层之间。 输入和输出个数分别为4和…