Clipboard.js_js复制文本代码

Clipboard.js_js复制文本代码Clipboard.js实现文本复制或者剪切到剪切板引用js文件使用一使用二使用三

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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/167740.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • x86汇编指令详解_x86汇编指令详解

    x86汇编指令详解_x86汇编指令详解——————————————一、数据传输指令———————————————它们在存贮器和寄存器、寄存器和输入输出端口之间传送数据。1.通用数据传送指令:MOV传送字或字节.MOVSX先符号扩展,再传送.MOVZX先零扩展,再传送.PUSH把字压入堆栈.POP把字弹出堆栈.PUSHA把AX,CX,DX

    2022年9月13日
    1
  • 微信oauth获取用户的信息页面授权

    微信oauth获取用户的信息页面授权

    2022年1月10日
    49
  • navicate 15激活码获取【2022最新】2022.02.06

    (navicate 15激活码获取)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年4月1日
    385
  • 缺陷报告编写规范[通俗易懂]

    缺陷报告编写规范[通俗易懂]引言 软件缺陷定义  软件缺陷(Defect):又叫做Bug。即为计算机软件、程序、web应用中存在的某种不符合正常运行的功能问题。也是错误、隐藏,让用户不满意的功能缺陷。从产品内部看,缺陷是软件产品开发或维护过程中存在的错误、毛病等各种问题;从产品外部看,缺陷是系统所需要实现的某种功能的失效或违背。 缺陷报告定义  缺陷报告把测试的过程和结果写成文档,并对发现的问题和缺陷进行分析,为…

    2022年9月18日
    2
  • python生成器详解_自动生成python代码

    python生成器详解_自动生成python代码生成器利用迭代器,我们可以在每次迭代获取数据(通过next()方法)时按照特定的规律进行生成。但是我们在实现一个迭代器时,关于当前迭代到的状态需要我们自己记录,进而才能根据当前状态生成下一个数据。

    2022年7月31日
    54
  • C语言入门项目篇:贪吃蛇(完整代码+详细注释)「建议收藏」

    C语言入门项目篇:贪吃蛇可直接运行。#include<stdio.h>#include<stdlib.h>#include<windows.h>#include<time.h>#include<conio.h>/*大一上的时候C语言入门学的一个小游戏。还是挺有意思的,有兴趣的同学可以继续优化下:比如蛇头碰到蛇身就判定为输/给蛇身加点颜色等。*///1.2食物结构体#defineMAPHEIGHT25#defi

    2022年4月4日
    118

发表回复

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

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