Clipboard.js实现复制[通俗易懂]

Clipboard.js实现复制[通俗易懂]Clipboard.js实现文本复制或者剪切到剪切板引用js文件使用一使用二使用三

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

Clipboard.js实现文本复制或者剪切到剪切板

引用js文件

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

使用一

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> 
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">  Copy to clipboard</button>
<script>    
    //必须要初始化 第一种初始化    
    var clipboard = new ClipboardJS('.btn');    
    clipboard.on('success', function(e) {        
        console.log(e);    
    });    
    clipboard.on('error', function(e) {        
        console.log(e);    
    });  
</script>

使用二

<div id="btn" data-clipboard-text="1">
    <span>Copy</span>
</div>
<script>    
    var btn = document.getElementById('btn');    
    var clipboard = new ClipboardJS(btn);    
    clipboard.on('success', function(e) {        
        console.log(e);    
    });    
    clipboard.on('error', function(e) {        
        console.log(e);    
    });
</script>

使用三

<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
<script>    
    var btns = document.querySelectorAll('button');    
    var clipboard = new ClipboardJS(btns);    
    clipboard.on('success', function(e) {        
        console.log(e);    
    });    
    clipboard.on('error', function(e) {        
        console.log(e);    
    });
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

(0)
上一篇 2022年7月1日 下午7:46
下一篇 2022年7月1日 下午8:00


相关推荐

  • Linux修改用户名和用户组

    Linux修改用户名和用户组最近安装了RedHatEnterpriseLinux5,以作学习之用。因为安装的时候随手创建了一个用户,后来却不太满意,需要修改下用户名。摸了许久才搞定并且理解,记录如下:总体来说,修改用户名和所在组,经过了一下步骤:1.修改用户名称2.修改用户所在主要组名称3.修改用户主目录名称4.修改新用户主目录指向上述步骤,经过图形界面修改和命令修改两

    2025年11月21日
    4
  • python微信刷屏_拍一拍,微信史上最短一行代码

    python微信刷屏_拍一拍,微信史上最短一行代码今日推文说明二条:Python办公自动化|从Word到Excel三条:17个Python的牛逼骚操作,你都OK吗?↑关注+星标,后台回复【大礼包】送你Python自学大礼包图片来自不正经程序员…

    2022年5月23日
    49
  • Docker(三)- 从镜像运行启动容器「建议收藏」

    Docker(三)- 从镜像运行启动容器「建议收藏」文章目录从镜像运行启动容器容器启动后运行的命令`ENTRYPOINT`和`CMD`启动容器时覆盖`ENTRYPOINT`和`CMD“-d`后台运行`dockerexec`进入容器,运行指定命令`–name`和`–restart=always“–rm`和`dockercp`从镜像运行启动容器从一个镜像可以运行启动一个或多个容器。所谓容器,我们可以理解为是一个虚拟的计算机,其中运行着操作系统,操作系统中运行着我们部署的应用。从tomcat镜像启动容器:do

    2025年12月1日
    7
  • js 符号转换 html代码

    js 符号转换 html代码S转换HTML转义符//去掉html标签//普通字符转换成转意符//转意符换成普通字符//转成空格//回车转为br标签//去除开头结尾换行,并将连续3次以上换行转换成2次换行//将多

    2022年7月1日
    26
  • XCL-Charts图表库中柱形图的同源风格切换介绍

    XCL-Charts图表库中柱形图的同源风格切换介绍

    2021年12月5日
    51
  • python中矩阵的转置怎么写_Python 矩阵转置的几种方法小结

    python中矩阵的转置怎么写_Python 矩阵转置的几种方法小结我就废话不多说了,直接上代码吧!#Python的matrix转置matrix=[[1,2,3,4],[5,6,7,8],[9,10,11,12]]defprintmatrix(m):foreleinm:foriinele:print(“%2d”%i,end=””)print()#1、利用元祖的特性进行转置deftransformMatrix(m):#此处巧妙的先按照传递…

    2022年5月5日
    119

发表回复

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

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