Clipboard.js_js复制文本代码

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


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

相关推荐

  • Java数字图像处理基础 – 必读

    写了很多篇关于图像处理的文章,没有一篇介绍Java2D的图像处理API,文章讨论和提及的API都是基于JDK6的,首先来看Java中如何组织一个图像对象BufferedImage的,如图:一个Buf

    2021年12月21日
  • 2020最新版Net加壳工具

    2020最新版Net加壳工具VirboxProtector发布最新版本Net加壳工具:VirboxProtector2.VirboxProtector为.NETFramework编写的软件做代码保护,防止代码被反编译,防止IL代码在内存被Dump。同时可配合授权产品实现软件的许可管理。加密技术VirboxProtector.NET版通过多种保护方式来防止反编译,加密后可让任何现有工具都无法反编译。JIT加密将.NET所有方法的IL指令经过加密,仅在.NET虚拟机进行J.

    2022年6月27日
  • $.ajax()方法参数详解

    $.ajax()方法参数详解$.ajax()方法是jQuery最底层的Ajax实现。它的结构为:$.ajax(options)该方法只有一个参数,但是这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参

    2022年7月3日
  • 单片机STM32_ds18b20工作原理简述

    单片机STM32_ds18b20工作原理简述硬件原理图LCD12864.c你主要看每个功能函数是如何实现的/*****************************************按照自己的硬件电路图来设置*————————–*|PB.09:(LCD_BLK)|*|PC.06:(LCD_RST)…

    2022年9月2日
  • MyBatis 快速入门和重点详解(详解)「建议收藏」

    MyBatis 快速入门和重点详解(详解)「建议收藏」目录前言:准备工作:开始:1、创建项目(本博主就使用Eclipse,其他编辑器都可以,工具而已)2、创建数据库(mybatisdemo)及表(student)3、创建User对象4、在entity包下创建userMapper,xml文件,如下图5、创建MyBatis的配置文件6、创建MybatisTest.java进行测试前言:Mybatis概念、名词的…

    2022年6月13日
  • 中国移动apn接入点选哪个网速快(中国移动数据接入点怎么设置)

    中国移动有cmwap,cmnet和LTE三种网络接入点。这三个网络接入点的特点各有不同。其中LTE就是指4G,网络速度相较其他两种接入点速度更快,流量损耗速度也更快。具体介绍如下:1、CMNET可以获得完全的Internet访问权。我们通过CMWAP只能访问WAP网站。CMWAP使用HTTP代理协议和WAP网关协议可以访问到Internet。CMNET则适用于所有协议,它也是标准的TCP/IP协议…

    2022年4月12日

发表回复

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

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