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


相关推荐

  • Idea激活码最新教程2023.3.2版本,永久有效激活码,亲测可用,记得收藏

    Idea激活码最新教程2023.3.2版本,永久有效激活码,亲测可用,记得收藏Idea 激活码教程永久有效 2023 3 2 激活码教程 Windows 版永久激活 持续更新 Idea 激活码 2023 3 2 成功激活

    2025年5月27日
    0
  • Python设置环境变量

    Python设置环境变量文章目录一、我们安装Python。二、设置环境变量。1、找到计算机属性。2、设置PATH。一、我们安装Python。点击链接下载:python下载你也可以无脑安装,对计算机的影响不打,不过建议别无脑我们选择自己安装,然后选择想要安装的目录,不然我们能看见在InstallNow下面有一个目录那个就是默认的安装C盘位置,当然若你觉得这样好找python也可以直接点第一个安装这里如果看不懂可以不管,也可以根据自我需求来点,可以用微信的拍照翻译二、设置环境变量。1、找到计算机属性。我们右击桌

    2022年10月22日
    0
  • Java安全之反序列化回显研究

    Java安全之反序列化回显研究0x00前言续上文反序列化回显与内存马,继续来看看反序列化回显的方式。上篇文中其实是利用中间件中存储的Request和Response对象来进行回显。但并不止这么

    2021年12月13日
    64
  • 二十三又是谁的二十三

    二十三又是谁的二十三23岁那年你正处在哪个状态?现在呢?我,23岁,应届毕业生。生活,工作,爱情都处于人生的低谷,一穷二白,一无所有,一事无成。分享一下成长的建议吧。匿名用户23岁那年…就是去年…在22岁的时候我毕业,同时第二年准备考研,结果因为压力太大,期望太高,又失利了,但是我依然满怀信心和憧憬在我23岁那年四月,当我深爱的女孩(在这之前我追了她四年)说她要去北京时,我在毫无准备的情况下,带了2000块钱冲到北京,那会的北京还有点冷…但是我只是想打好前站,在她来的时候能提供一点帮助,在前两周里,每天面试两家公

    2022年7月25日
    6
  • FlashFXP 5.4.0 注册

    FlashFXP 5.4.0 注册打开软件点击–帮助–关于–点击–右边中部的钥匙输入以下全部字母数字  FLASHFXPwQAOlhkgwQAAAAC6W5MNJwTnsl73nIraAU149tnCQS   0hmZU3GGBQG1FtoSp5x0mUgA7bFW0qr0fKk2KCA+v2CCrFbF+q   bmLvEjV+4JCAX+H/TBpG7pdEJ8IEW09ST8t60Poou/…

    2022年7月26日
    31
  • 运维架构师-并不遥远的彼岸

    运维架构师-并不遥远的彼岸在百度里搜索运维架构师,你会发现招聘的职位还不少并且月薪、年薪都很可观。提到架构师,大家都觉得挺神秘的,而作为运维领域的架构师,站在系统稳定和高可用、高扩展的角度,其承载着太多的责任和挑战。对于运维工

    2022年7月17日
    13

发表回复

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

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