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


相关推荐

  • Jmeter下载安装配置—测试小白

    Jmeter下载安装配置—测试小白一,进入官网:http://jmeter.apache.org/1.第一步进入官网如下图2.选择进行下载,下载下来为一个压缩包,解压即可。3.我下载的是jmeter4.0版本,对应jdk1.8。然后就进行解压。个人认为要注意3点:1.解压之后压缩包叫apache-jmeter-4.0.zip,如是src.zip后缀的都不对,打开之后会报错不可用,因为里面缺少我们下一步将要配置的环境变量.jar文件…

    2022年5月29日
    32
  • linux中kill命令详解_linux kill函数

    linux中kill命令详解_linux kill函数linuxkill命令详解一、命令格式:kill[参数][进程号]二、命令功能:发送指定的信号到相应进程。不指定型号将发送SIGTERM(15)终止指定进程。如果任无法终止该程序可用“-KILL”参数,其发送的信号为SIGKILL(9),将强制结束进程,使用ps命令或者jobs命令可以查看进程号。root用户将影响用户的进程,非root用户只能影响自己的进程。三、命令参数:-l信号,若果不加信号的编号参数,则使用“-l”参数会列出全部的信号名称-a当处理当前进程时,不

    2025年7月1日
    3
  • devtools工具如何使用_devtool制作插件

    devtools工具如何使用_devtool制作插件7devtool快速参考目录7devtool快速参考7.1获得帮助7.2工作区层结构7.3向工作区层添加新配方7.4提取现有配方的来源7.5同步一个配方的提取源树7.6修改现有配方7.7编辑现有配方7.8更新配方7.9查看配方升级状态7.10升级配方7.11重置配方7.12建立你的配方7.13建立你的形象7.14在目标机器上部署你的软件7.15从目标机器上删除您的软件7.16在替代位置创建工作空间层7.17获取工作区中配方的状态

    2022年10月5日
    2
  • 递归算法–斐波那契数列「建议收藏」

    递归算法–斐波那契数列「建议收藏」大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0)。n&amp;lt;=39很容易我们想到使用递归求解:publicclassSolution{publicintFibonacci(intn){if(n==0)return0;if(n==1)…

    2025年10月28日
    2
  • Python海龟画图集合

    Python海龟画图集合Python海龟画图集合1.小猪佩奇2.彩色螺旋线3.太极4.美国队长盾牌1.小猪佩奇#coding:utf-8importturtleastt.screensize(400,300)t.pensize(4)#设置画笔的大小t.colormode(255)#设置GBK颜色范围为0-255t.color((255,155,192),"pink…

    2022年6月28日
    30
  • influx配置文件详解

    influx配置文件详解influx 配置文件详解官方文档 https docs influxdata com influxdb v1 7 administrati config 全局配置 reporting disabled false 该选项用于上报 influxdb 的使用信息给 InfluxData 公司 默认值为 false 将此选项设置为 true 将禁用报告 bind address 8088 备份恢复时使用 默认值为 8088 Metastore 配置 meta 本部分控制 InfluxDBmeta

    2025年10月7日
    3

发表回复

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

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