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/>标签引入。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
clipboard.js在移动端复制失败的解决方法
1.前沿 一句话介绍下clipboard.js:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能. 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是ok的.简直一脸懵逼... 遇到这个bug,我第一个思考到的是,这是个常用的插件,网上应该有现成的解决方法.网友分享的方法是:把绑定data-clipboard-target
-
基于js实现复制内容到操作系统粘贴板过程解析
一.如果只考虑IE浏览器,可以直接用原声js实现(兼容IE.谷歌.火狐等浏览器) if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将需要复制的内容复制到操作系统粘贴板 window.clipboardData.setData("Text", "要复制的内容"); } 二.如果是其他浏览器,上面的办法行不通,其他浏览器出于安全的考虑禁止js访问操作系统粘贴板. 这里需要
-
JavaScript实现复制内容到粘贴板代码
最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag
-
react.js组件实现拖拽复制和可排序的示例代码
在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计. 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性. 拖拽复制的效果如下: 由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在"拖拽释放"的时候,将被拖拽方的数据放到当前目标所在的value数组中
-
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属
-
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对象集合操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>www.jb51.net jQuery复制json</title> <script src="
-
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板 但是 select() 方法只对 <input>
-
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整合
主要从两个方面入手了: 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实现鼠标自动切换和复制粘贴功能
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实现复制粘贴功能
楔子 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
随机推荐
- C# 复制与删除文件的实现方法
- MySQL错误Forcing close of thread的两种解决方法
- DB2编程序技巧(1)
- Oracle将查询的结果放入一张自定义表中并再查询数据
- jquery+json实现数据二级联动的方法
- Extjs EditorGridPanel中ComboBox列的显示问题
- 兼容FF和IE的动态table示例自写
- showModalDialog模态对话框的使用详解以及浏览器兼容
- ThinkPHP使用心得分享-分页类Page的用法
- PHP函数eval()介绍和使用示例
- js用正则表达式控制价格输入实现代码
- python操作ssh实现服务器日志下载的方法
- PHP判断文件是否被引入的方法get_included_files用法示例
- 用css实现图片垂直居中的使用技巧
- VBS教程:函数-ScriptEngineMajorVersion 函数
- Windows下SVNServer安装与配置详解
- jQuery position() 函数详解以及jQuery中position函数的应用
- Bootstrap实现默认导航栏效果
- 浅析Spring4新特性概述
- swoole和websocket简单聊天室开发