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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • [大整数乘法] java代码实现

    [大整数乘法] java代码实现

    2021年8月26日
    52
  • 关于CommonJS「建议收藏」

    关于CommonJS「建议收藏」老实说,之前我对CommonJS也是一无所知,直到不久前Node.js火起来,我去研究它,才了解到Node.js其实是CommonJS的一个部分实现,我才关注起CommonJS来。  以前我们说起HTML,我们说起JavaScript,大家的印象似乎都停留在了“网页”上面,从2005年开始,因为Ajax的缘故,有一种叫做“前端程序员”的新型物种诞生了。可是现在,前端程序员不甘心…

    2022年10月29日
    0
  • 开源运维工具

    开源运维工具 https://github.com/guohongze/adminset自动化运维平台:CMDB、CD、DevOps、资产管理、任务编排、持续交付、系统监控、运维管理、配置管理技术:centos7.2(1511)django1.11.9python2.7  https://github.com/welliamca…

    2022年4月8日
    36
  • 2021pycharm最新激活码_最新在线免费激活

    (2021pycharm最新激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月26日
    46
  • [转] 场景管理

    [转] 场景管理

    2021年8月22日
    48
  • 格式化hdfs的命令_hadoop的启动命令

    格式化hdfs的命令_hadoop的启动命令总结:上传文件:put、copyFromLocal、moveFromLocal下载文件:get、copyToLocal、moveToLocal查看文件:text、cat、tail合并文件:getmerge命令详解HDFS命令基本格式:hadoopfs-cmd<args>表格:选项名称使用格式含义-ls-ls查看指定路径的当前目录结构-lsr-lsr递归查看指定路径的目录结…

    2022年9月1日
    1

发表回复

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

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