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');
       });

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 网站备案是域名备案还是服务器备案(域名备案一定要服务器吗)

    网站域名服务器怎么备案内容精选换一换WordPress简称WP,最初是一款博客系统,后逐步演化成一款免费的CMS(内容管理系统/建站系统)。本文档指导用户使用华为云市场镜像“Wordpress官方正式版”部署WordPress博客系统。已购买虚拟私有云和弹性公网IP。如果规划为网站配置域名,需已经购买好相应的域名。弹性云服务器所在安全组添加了如表1所示的安全组规则,具体步骤空壳网站指备案主体已在…

    2022年4月10日
  • 谷歌学术搜索方法_取消谷歌浏览器打开pdf

    谷歌学术搜索方法_取消谷歌浏览器打开pdf保研完之后,该浪的也都浪够了,是时候重新开始认真学技术了。2015年12月20号,我被分配到一个浙大的项目中去,去了之后我发现什么都不会,而且这个项目中好多浙大的研究生,博士。我有点方,不过项目总负责人王老师倒来了个积极,在一一向这些学神们介绍了我之后,我不觉感到肩上的担子重了。不过我有信心,同样都是人,我努力也一定能和他们一样的(更何况我一直认为自己不一般,只是没到时候,嘿嘿)。——

    2022年10月10日
  • 手游服务端架设一条龙_vm服务器

    手游服务端架设一条龙_vm服务器本文作者:smeli(俄罗斯人,于2009年完成该教程)PS:要比国内写的那些教程完整,详细,希望大家喜欢VS运行库安装………………………………………..2SQL数据库安装…………………………………………..3L2Server设置………………………………………………11GM账户创建………………………………………….15运行服务端(1)…

    2022年9月7日
  • ASP.Net MVC开发基础学习笔记:一、走向MVC模式

    ASP.Net MVC开发基础学习笔记:一、走向MVC模式一、ASP.Net的两种开发模式1.1ASP.NetWebForm的开发模式(1)处理流程在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/blog/

    2022年7月4日
  • pycharm2021.11.2激活[最新免费获取]

    (pycharm2021.11.2激活)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~09LVN3XLKC-eyJsaWNlbnNlSWQiOi…

    2022年3月28日
  • 密码库LibTomCrypt学习记录——(2.12)分组密码算法的工作模式——OMAC认证模式

    密码库LibTomCrypt学习记录——(2.12)分组密码算法的工作模式——OMAC认证模式OMACOMAC是一种认证模式,LibTomCrypt中涉及的OMAC,而NIST中提到的是CMAC。它们之间的关系是这样的:为避免基本的MAC算法CBC-MAC存在的安全缺陷,Black和Rogaway对其进行了改进,提出了避免CBC-MAC安全缺陷的XCBC算法。Iwata和Kurosawa对XCBC进一步改进,提出了One-KeyCBC-MAC(OMAC),接着又精益求精地提出了OM…

    2022年7月14日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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