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


相关推荐

  • maven项目 启动报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener[通俗易懂]

    maven项目 启动报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener[通俗易懂]maven项目 启动报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener

    2022年4月23日
    46
  • 多模态综述

    多模态综述多模态综述介绍参考文献:《MultimodalMachineLearning:ASurveyandTaxonomy》介绍我们身边的环境就是一个多模态的环境,看到的实体、听到的声音、闻到的气味和尝到的味觉。本篇综述不是着重于多模态的应用,而是重点关注多模态的方法和技术。多模态问题的定义在于数据来源是不同模态的数据,而这些数据具有异质性(heterogeneity),则带来了多模态的五个挑战:representation,translation,alignment,fusion和co-

    2022年6月17日
    87
  • 数据流图解析

    数据流图解析(一)分层数据流图的设计方法:=====    第一步,画子系统的输入输出把整个系统视为一个大的加工,然后根据数据系统从哪些外部实体接收数据流,以及系统发送数据流到那些外部实体,就可以画出输入输出图。这张图称为顶层图。第二步,画子系统的内部把顶层图的加工分解成若干个加工,并用数据流将这些加工连接起来,使得顶层图的输入数据经过若干加工处理后,变成顶层图

    2022年6月21日
    117
  • 零散的MySQL基础总是记不住?看这一篇就够了!

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:Sicimike blog.csdn.net/Baisitao_/article/details/104714…

    2021年6月25日
    75
  • eXtremeDB微秒级实时数据库简介「建议收藏」

    eXtremeDB微秒级实时数据库简介「建议收藏」eXtremeDB微秒级实时数据库简介 eXtremeDB实时数据库是美国McObject公司于上世纪九十年代末推出的全世界第一款全内存式实时数据库,特别为高性能、低开销、稳定可靠的极速实时数据管理而设计。 eXtremeDB的性能可以达到微秒一级的惊人速度。eXtremeDB能够达到这样惊人的极限速度,是由其对市场的独特理解、长期的行业经验、持续不断的创新精神和革命性的体系结构等…

    2022年8月31日
    5
  • discuz整站搬家

    discuz整站搬家网站建设中难免遇到要更换服务器和站点搬家,这里分享下  1、首先我们需要登录DZ论坛后台,在全局设置里边,关闭站点,防止网站出现新数据导致备份数据不完整。如图:  2、后台-站长,点击数据库,按照提示,选择备份类型,点击提交开始进行备份。  3、备份完成之后我们可以看到如下图。  4、接下来我们需要把整个网站进行压缩打包,打包完成之后把压缩包…

    2022年7月17日
    32

发表回复

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

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