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)


相关推荐

  • mybatis缓存配置

    mybatis缓存配置mybatis的缓存有三种方式:1、一级缓存(基于SqlSession会话级别的;2、二级缓存(基于nameSpace级别的,范围比以及缓存更广);3、第三方缓存;mybatis缓存使示意图:一、一级缓存说明:其中一级缓存是mybatis默认使用的缓存,无需手动配置,二级缓存需要手动配置;一级缓存失效条件1)sqlSession不同,由于一级缓存是基于sqlSession级别的,所以当使用不同sq…

  • pycharm激活码2021最新破解方法

    pycharm激活码2021最新破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 列举出linux文件和目录常用的命令_linux复制文件到另一个目录

    列举出linux文件和目录常用的命令_linux复制文件到另一个目录目录命令总览ls(英文全拼:listfiles):列出目录及文件名cd(英文全拼:changedirectory):切换目录pwd(英文全拼:printworkdirectory):显

  • sqlmap中文手册pdf_sqlquery工具

    sqlmap中文手册pdf_sqlquery工具这是我自己翻译的Sqlmap1.1.10的中文手册。Sqlmap是十分著名的、自动化的SQL注入工具。为了较为系统地学习Sqlmap,我决定翻译一遍Sqlmap的用户手册,于是便有了此文。由于我英语学得很差,所以翻译地不好。基本上是意译,还加入了我自己的东西,和原文有较大差距。

    2022年10月20日
  • 十五、组合模式—— 容器与内容的一致性 #和设计模式一起旅行#

    组合具有一致性…故事背景坚持去输出真的很不容易,今天的的天气真的是热啊!我之前一直想些一个系列是和设计模式去旅行,通过构思一些场景,让自己更好的理解和表达设计模式,但是有时候为了思考一个适合的故事会花费很多时间,so,从这里开始,如果后面的设计模式想到了好的场景的话就写故事背景,要不就简单介绍,重点看故事主角。在现实生活中很多地方我们会使用到树形结构,在软件中也随处可见,例…

  • springboot 2.0 springboottest 事物自动回滚,事物不自动回滚 @Transactional @Rollback[通俗易懂]

    springboot 2.0 springboottest 事物自动回滚,事物不自动回滚 @Transactional @Rollback[通俗易懂]@Transactional//支持事物,@SpringBootTest事物默认自动回滚@Rollback//事务自动回滚,不自动回滚@Rollback(false)packagecom.urthink.upfs.springbootmybatis;importcom.github.pagehelper.PageHelper;importcom.github.pageh…

发表回复

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

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