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


相关推荐

  • Simhash_hartwig

    Simhash_hartwig先贴一张网上的图片:解释一下图片:这里feature可以指一篇文档分词后的某个词,即将文档中的某个词作为一个特征。weight是这个词的权重,这里可以是这个词在这个句子中出现的次数。这里的hash算法就是传统的hash算法,通过调用一个hash函数实现的。simhash是为了计算一篇文档之间的相似度存在的,通过simhash算法可以计算出文档的simhash值,通过各个文档计算出的…

    2022年9月28日
    3
  • 详述 Spring MVC 框架中拦截器 Interceptor 的使用方法

    详述 Spring MVC 框架中拦截器 Interceptor 的使用方法1前言  昨天新接了一个需要,“拦截XXX,然后OOO”,好吧,说白了就是要用拦截器干点事(实现一个具体的功能)。之前,也在网络上搜了很多关于Interceptor的文章,但感觉内容都大同小异,而且知识点零零散散,不太方便阅读。因此,正好借此机会,整理一篇关于拦截器的文章,在此分享给大家,以供大家参考阅读。2拦截器2.1概念  Java里的拦截器是动态拦截action调用的对象。它提

    2022年5月14日
    33
  • c语言rtp协议,RTP系列:RTP协议详解和分析

    c语言rtp协议,RTP系列:RTP协议详解和分析1、RTP概述实时传输协议(Real-timeTransportProtocol或简写RTP)是一个网络传输协议,作为因特网标准在RFC3550(该文档的旧版本是RFC1889)有详细说明。RFC3551(STD65,旧版本是RFC1890)详细描述了使用最小控制的音频和视频会议。RTP协议详细说明了在互联网上传递音频和视频的标准数据包格式。它一开始被设计为一个多播协议,但后来被用在…

    2022年6月28日
    74
  • 目标检測的图像特征提取之(一)HOG特征

    目标检測的图像特征提取之(一)HOG特征

    2021年11月15日
    42
  • PyQuery库[通俗易懂]

    PyQuery库[通俗易懂]PyQuery库PyQuery库也是一个非常强大又灵活的网页解析库,PyQuery是Python仿照jQuery的严格实现。语法与jQuery几乎完全相同,所以不用再去费心去记一些奇怪的方法了。1、初始化初始化的时候一般有三种传入方式:传入字符串,传入url,传入文件字符串初始化eg1:html=”'<div><ul>…

    2022年6月11日
    33
  • 【手打】LZW编码的C/C++实现「建议收藏」

    【手打】LZW编码的C/C++实现

    2022年1月25日
    46

发表回复

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

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