前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Clipboard.js实现复制文本到剪贴板功能[通俗易懂]

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

作者头像
全栈程序员站长
发布2022-09-15 13:04:06
2K0
发布2022-09-15 13:04:06
举报
文章被收录于专栏:全栈程序员必看

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

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

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

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

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

代码语言:javascript
复制
clipboard.on('error', function(e) {
    alert('请选择手动复制!')
});

使用方法如下:

1、在页面引入clipboard.js

代码语言:javascript
复制
<script type="text/javascript" src="js/clipboard.min.js"></script>

2、从元素内容复制文本

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

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

代码语言:javascript
复制
<!--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、从元素属性复制文本

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

4、执行JS事件

代码语言:javascript
复制
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.cn/159251.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年7月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档