JS插件clipboard.js实现一键复制粘贴功能

一键复制粘贴功能需要用到一个轻量级的JS插件：clipboard.js。

官网地址

下载到本地后，将其放入项目中，直接引用即可。具体实现代码如下：

<!DOCTYPE html>
<html>
   <head>
 <meta charset="UTF-8">
 <title>一键复制粘贴</title>
 <style>
 .transfer {
  width: 90%;
  margin: 20px auto;
  font-size: 18px;
 }
 .transfer button {
  margin-top: -5px;
  float: right;
  margin-left: 10px;
  background-color: rgb(3, 169, 244);
  width: 30%;
  height: 25px;
  font-size: 14px;
  color: white;
  border: 0;
 border-radius: 8%;
 }
 </style>
 </head>

 <body>
 <div class="transfer">
 支付宝：<span id="zfb_account">11111111111</span>
 <button onclick="copy1()" data-clipboard-action="copy" data-clipboard-target="#zfb_account" id="copy_zfb">一键复制</button>
 </div>
 <div class="transfer">
 微信：<span id="wx_account">2222222</span>
 <button onclick="copy2()" data-clipboard-action="copy" data-clipboard-target="#wx_account" id="copy_wx">一键复制</button>
 </div>
 <input type="text" />
 </body>

 <script type="text/javascript" src="../js/clipboard.min.js"></script>
 <script>
 function copy1() {
 var clipboard = new Clipboard('#copy_zfb');
 clipboard.on('success', function(e) {
 e.clearSelection(); //选中需要复制的内容
 alert("复制成功！");
 });
 clipboard.on('error', function(e) {
 alert("当前浏览器不支持此功能，请手动复制。")
 });
 }

 function copy2() {
 var clipboard = new Clipboard('#copy_wx');
 clipboard.on('success', function(e) {
 e.clearSelection(); //选中需要复制的内容
 alert("复制成功！");
 });
 clipboard.on('error', function(e) {
 alert("当前浏览器不支持此功能，请手动复制。")
 });
 }
 </script>

</html>

效果图：

注意：如果你在项目中使用了其他的前端框架或者插件，有可能会与clipboard.js插件产生冲突。解决方法，可以使用<iframe/>标签，将此部分代码放在一个新的html文件中，然后在主文件中使用<iframe/>标签引入。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript复制内容到剪贴板的两种常用方法

    常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单. 引用 直接引用: <script src="dist/clipboard.min.js"></script> 包: npm install

  • jQuery实现简单复制json对象和json对象集合操作示例

    jQuery实现简单复制json对象和json对象集合操作示例

    本文实例讲述了jQuery实现简单复制json对象和json对象集合操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>www.jb51.net jQuery复制json</title> <script src="

  • react.js组件实现拖拽复制和可排序的示例代码

    在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计. 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性. 拖拽复制的效果如下: 由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在"拖拽释放"的时候,将被拖拽方的数据放到当前目标所在的value数组中

  • JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

  • clipboard.js在移动端复制失败的解决方法

    clipboard.js在移动端复制失败的解决方法

    1.前沿 一句话介绍下clipboard.js:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能. 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是ok的.简直一脸懵逼... 遇到这个bug,我第一个思考到的是,这是个常用的插件,网上应该有现成的解决方法.网友分享的方法是:把绑定data-clipboard-target

  • JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

    本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属

  • js实现点击按钮复制文本功能

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板 但是 select() 方法只对 <input>

  • 基于js实现复制内容到操作系统粘贴板过程解析

    一.如果只考虑IE浏览器,可以直接用原声js实现(兼容IE.谷歌.火狐等浏览器) if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将需要复制的内容复制到操作系统粘贴板 window.clipboardData.setData("Text", "要复制的内容"); } 二.如果是其他浏览器,上面的办法行不通,其他浏览器出于安全的考虑禁止js访问操作系统粘贴板. 这里需要

  • JS插件clipboard.js实现一键复制粘贴功能

    JS插件clipboard.js实现一键复制粘贴功能

    一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js. 官网地址 下载到本地后,将其放入项目中,直接引用即可.具体实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer { width: 90%; margin: 20px auto; fon

  • 代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    主要从两个方面入手了: 1.高亮显示/换行 2.复制代码按钮 这两方面都有现成的插件. 代码高亮插件--highlight.js 1.下载highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选常用语言,通常common就足够用了. 点击download,下载,解压,里面会有js文件和css文件. js文件决定哪些部分高亮,css决定代码颜色 2.在解压后的文件里找到一个highlight.pack.js文件,在使用时导入

  • swiper.js插件实现pc端文本上下滑动功能示例

    本文实例讲述了swiper.js插件实现pc端文本上下滑动功能.分享给大家供大家参考,具体如下: 在网站上看小说,文本太长时,靠鼠标去拖动滚动条太麻烦,鼠标滚轮又不精确,滚一下就不知道跑到哪去了.能不能像移动端那样可以鼠标上下滑动呢?swiper可以完美解决这个问题. 1.首先当然是引入swiper文件了: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/c

  • 在vue或H5中如何使用复制粘贴功能

    目录 vue或H5中使用复制粘贴 复制粘贴功能 :H5或vue或uniapp vue或H5中使用复制粘贴 1.使用原生的方法,一般都是在浏览器上使用,所以兼容性不是很好 我是直接使用原生方法创建的input,你也可以直接在DOM上加input标签,然后去获取它的value值. copyUrl(){    let url = 'https://blog.csdn.net/linfng023/article/details/101014133';    let domInput = document

  • VirtualBox安装CentOS实现鼠标自动切换和复制粘贴功能

    VirtualBox安装CentOS实现鼠标自动切换和复制粘贴功能

    1. 输入命令: cd /media 2. 输入命令: sh VBoxLinuxAdditions.run 3. 可能会出现错误: 解决的办法是依次输入命令: yum install update yum update kernel yum update kernel-devel yum install kernel-headers yum install gcc yum install gcc make 然后再运行: sh VBoxLinuxAdditions.run 就可以了: 以上所述是小

  • html5+CSS 实现禁止IOS长按复制粘贴功能

    因为在移动端APP需要实现长按执行别的事件,但是在iOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法. 项目是APP,已经经过多款手机适配此时,因此可以放心使用. /*设置IOS页面长按不可复制粘贴,但是IOS上出现input.textarea不能输入,因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:non

  • 如何用python实现复制粘贴功能

    如何用python实现复制粘贴功能

    楔子 pandas里面有这么一个方法:pd.read_clipboard,可以根据你复制的内容生成DataFrame.是的,就是我们平时选中,然后复制.或者Ctrl+C时拷贝的内容,所以比较神奇,那么pandas到底是怎么做到的,它是怎么读出我们使用Ctrl +C复制的内容呢. 看了一下源码,非常的复杂,方法是使用了ctypes,然后调用了操作系统的一个动态库实现的.ctypes是专门来调用C.C++使用的,但是我们知道Python有一个pywin32模块,对于Windows操作系统提供的接口进

  • JS基于clipBoard.js插件实现剪切、复制、粘贴

    摘要: 最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢? 地址:https://github.com/baixuexiyang/clipBoard.js 方法: 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy:

  • 复制粘贴功能的Python程序

    今天因为给BeauBeau提供的抽奖号码做SQL文件,一开始收到ZIP文件解开压缩之后被吓到了--29个CSV文件,每个文件保存了1000个奖券ID和号码-_-! 照上次一样,打开每个CSV文件做先做单独的SQL文件,每个SQL中有1000条插入语句,随后将29个文件的所有SQL语句都复制粘贴到同一个总的SQL文件中. CSV文件中的结构是"ID,NUMBER"的结构,其中ID是7位数字,NUMBER是11位数字.这样用正则式来进行捕捉的时候就比较方便了,在Eclipse的查找/替换功

  • JS input文本框禁用右键和复制粘贴功能的代码

    复制代码 代码如下: function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { docume

随机推荐