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


相关推荐

  • python+opencv图像模板匹配—单模板匹配

    python+opencv图像模板匹配—单模板匹配

    2021年10月6日
    40
  • Python爬虫之女神网图片(三)

    Python爬虫之女神网图片(三)女神网是一个可以搜索女神的图片的网站。废话不说,直接来干货:环境配置:系统环境:WIN7/8/10编译环境:Python3+所需库:requests、re、os、pymongo、Beatifulsoup、timeIDE:Pycharmnvshen.py#!/usr/bin/python#-*-coding:utf-8-*-importrequestsfromrequestsi…

    2022年6月8日
    47
  • 深度学习算法评价标准AP bbox bev 3d

    深度学习算法评价标准AP bbox bev 3d

    2020年11月8日
    520
  • java 工作流 详解

    java 工作流 详解工作流基本概念:什么是工作流? 工作流:两个或两个以上的人,为了共同的目标,连续的以串行或并行的方式去完成某一业务。 业务:工作流所指业务涵盖了与经营相关的活动。   串行或并行:业务中的步骤也许以一步接着一步的方式进行,我们称之为串行;或者由不同的人或组合根据不同的情况处理,我们称之为并行。   两个或两个以上的人:如工作流的名称所表达的含义,一个人处理的业务

    2022年5月16日
    341
  • 一个指针占几个字节?原理是什么呢?

    一个指针占几个字节?原理是什么呢?一个指针占几个字节的问题,感觉会C语言的同学都知道。但是在面试过程中,面了几个同学,不是答忘记了,就是两个、四个的瞎蒙。。。那么,一个指针到底占几个字节呢?其实,这个问题很简单,稍微上网一搜,你就知道:一个指针在64位的计算机上,占8个字节;一个指针在32位的计算机上,占4个字节。这么简单的问题,为什么面试官愿意问呢?其实这个问题不是在考你的记忆能力,是在考察你的计算机基础能力。就比如,…

    2022年6月26日
    31
  • 学习笔记——STM32摄像头OV7725(二)

    学习笔记——STM32摄像头OV7725(二)AL422B及摄像头驱动原理一、AL422B简介STM32F4系列的控制器主频高、一般会扩展外部SRAM、SDRAM等存储器,且具有DCMI外设,可以直接根据VGA时序接收并存储摄像头输出的图像数据;而STM32F1系列的控制器一般主频较低、为节省成本可能不扩展SRAM存储器,而且不具DCMI外设,难以直接接收和存储OV7725图像传感器输出的数据。为了针对上述…

    2022年9月23日
    0

发表回复

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

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