Clipboard.js实现复制文本到剪贴板功能[通俗易懂]

Clipboard.js实现复制文本到剪贴板功能[通俗易懂]Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件,该插件可以将输入框,文本域,DOM节点元素中的文本内容复制到剪贴板中。官网地址:https://clipboardjs.com/ 浏览器兼容性:兼容Chrome、Firefox、Opera、Safari、IE9+对于不兼容的浏览器版本也有优雅的降级处理,可以采用下面的方式clipboard.o

大家好,又见面了,我是你们的朋友全栈君。

Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件,该插件可以将输入框,文本域,DOM节点元素中的文本内容复制到剪贴板中。

官网地址:https://clipboardjs.com/ 

浏览器兼容性:兼容Chrome、Firefox、Opera、Safari、IE9+

对于不兼容的浏览器版本也有优雅的降级处理,可以采用下面的方式

clipboard.on('error', function(e) {
    alert('请选择手动复制!')
});

使用方法如下:

1、在页面引入clipboard.js

<script type="text/javascript" src="js/clipboard.min.js"></script>

2、从元素内容复制文本

设置触发元素的data-clipboard-action属性,该属性的值为copy(复制)/cut(剪切)

设置data-clipboard-target属性,该属性值是要复制/剪切的目标元素的ID

<!--target-->
<span class="url" id="copyUrl">http://blog.csdn.net/oucqsy</span>
<!--trigger-->
<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="copy" data-clipboard-target="#copyUrl">复制</a>

3、从元素属性复制文本

 <a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="http://blog.csdn.net/oucqs">复制</a>

4、执行JS事件

var clipboard = new Clipboard('#copyBtn');
       clipboard.on('success', function(e) {
			e.clearSelection();
           console.log('success');
       });
       clipboard.on('error', function(e) {
           console.log('error');
       });

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159251.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 我的webos系统system-X 1.0 beta发布

    我的webos系统system-X 1.0 beta发布   在经历了将近一个月的努力后,我 的webos终于编写完成,该系统完全用javascript编写,没有用到任何flash以及插件,现在还处于测试阶段,暂时只支持ie浏览器,有许多功能还不完善,期待大家一起给我提出宝贵意见,我会继续努力的.   暂时把他命名为system-X,也就是我的姓名sx的扩展.该webos有以下功能:   1.仿windows的文件夹,支持不同文件夹窗口间

    2022年10月21日
  • CSS中的“>”是什么意思

    CSS中的“>”是什么意思

    2021年10月17日
  • 用js来实现那些数据结构14(树02-AVL树)

    在使用二叉搜索树的时候会出现一个问题,就是树的一条分支会有很多层,而其他的分支却只有几层,就像下面这样:如果数据量够大,那么我们在某条边上进行增删改查的操作时,就会消耗大量的时间。我们花费精力去构

  • SD/MMC卡介绍

    SD/MMC卡介绍1.1.什么是MMC卡MMC:MMC就是MultiMediaCard的缩写,即多媒体卡。它是一种非易失性存储器件,体积小巧(24mm*32mm*1.4mm),容量大,耗电量低,传输速度快,广泛应用于消费类电子产品中。1.2.什么是SD卡SD:SD卡为SecureDigitalMemoryCard,即安全数码卡。它在MMC的基础上发展而来,增加

  • Ubuntu18.04下安装Pytorch-GPU(超详细自己安装全过程)「建议收藏」

    Ubuntu18.04下安装Pytorch-GPU(超详细自己安装全过程)「建议收藏」硬件环境:自己的笔记本电脑CPU:i5-4210MGPU:NVIDIAgeforce920M1Anaconda3的安装与配置1.1下载可以到Anaconda官网下载历史版本:https://repo.anaconda.com/archive/国内的下载速度可能比较慢,选择到清华大学开源软件镜像站下载。我使用的python3.6.9,下载对于的Anaconda版本是5.1…

  • PULL解析入门

    PULL解析入门PULL解析技术案例关于Android的pull解析技术详解对于一个很少写作的人来说,写一篇博客还算比较困难的,但是面对困难岂有退缩之理,好了废话说完了,开始进入正题。对于Android来说pull解析xml类型的文件应该是非常简单的,当然这是pull解析本身特性所决定的,那么接下来就跟随我的脚步来看一看pull解析的小巧之处吧。首先我从网上找了一个api接口[RRS腾讯](http://r

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号