最近，做了一个切图的小项目

主要内容是微信号的推广页面，上面会有精美的图片和微信号:)

点击按钮，会复制到粘贴板上，自己去微信里面粘贴搜索:),懒人会进行一系列复杂操作么，不看好

首先，百度了一下，看中clipboard库，纯js兼容手机端，好激动:)

clibboard的GitHub地址，使用非常简单，自己看demo目录的内容，源码看的方，还是不知道如何实现的，求教

主要思路，就点击按钮，自动将文本复制到剪贴板。

选择使用其中的function，可以使用ajax从服务端获取微信号

官网的方案

 new Clipboard('.btn', {

     text: function(trigger) {

         return trigger.getAttribute('aria-label');

     }

 });

Now, you need to instantiate it by passing a DOM selector, HTML element, or list of HTML elements.

可以选择三种方式，来确定点击哪儿触发点击。

根据业务需要，使用zepto来获取json

 // 添加获取json

 Zepto(function ($) {

     $.getJSON('account/data.json', '?time='+new Date().getTime(), function (data) {

         let name = data.name;

         document.getElementById("num").innerHTML = name;

         var clipboard = new Clipboard('.btn', {

             text: () => name

         });

         clipboard.on('success', (e) => {console.log(e)

             alert('微信号已复制，请打开微信，点击右上角+号，选择添加朋友，粘贴搜索')});

         clipboard.on('error', (e) => console.log(e));

     });

效果如下：

发现点击，有弹窗，仔细观察会发现，在body底部出现了一串代码，hack方式，隐藏文本

下面是简单的html，有兴趣的同学可以自己试试

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>测试</title>

   <script src="dist/clipboard.min.js"></script>

   <script src="dist/zepto.min.js"></script>

   <script src="static/js/changeAccount.js"></script>

   <style>

     .bg{

       width:100%;

       height: 1500px;

       background-color: #ccc;

       text-justify: inter-cluster;

       font-size: 100px;

     }

   </style>

 </head>

 <body>

 <div class="btn">

   <div class="bg">

     背景

   </div>

   <p id="num"></p>

 </div>

 </body>

 </html>

在手机点击无任何效果，这个大坑踩了好久才知道，

具体怎么踩得不好意思说了，取巧终究还是要吃亏，，，

仔细地又看了一遍demo，发现多数都是<button class="btn">

索性照着官方来，

<button class="bg">
  背景
</button>

哎，心累，早这样不就好了，至于为什么刚开始不使用button，都是设计稿的锅，竟然没有按钮，还要

能点击复制，

页面有很多背景图片和内容，初步想法是，将按钮设置全屏，z-index=-1；

发现，红，绿区域点击无效，灰色区域可以复制，此时确信了，手机端点击是无法穿透的，只能获取最上面一层

改变一下思路，将按钮放在最上一层，不就可以了吗，你想到什么了

 z-index:999;

 opacity:0;

最后，想看完整项目的，请移步个人GitHub



												


											
解决clipboard手机端无法复制的一种思路的更多相关文章
	

    
								
  1. 《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》
		
    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
    
		
    2. 
						
  2. fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题
		
    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动  ...
    
		
    3. 
						
  3. APP手机端加载不到资源服务器后台解决参考
		
    今天发现app登录时,报could not get resource,日志中打印的是redis相关的错误,于是开始一步步检查错误! 后台架构:redis+mysql+elk+tomcat+zookee ...
    
		
    4. 
						
  4. 口碑订单，ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有
		
    关于 口碑订单,ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有 1. 2. 3. PS:是正餐后付的务必要选择口碑后付 完成以上设置即可
    
		
    5. 
						
  5. js replace 全局替换  以表单的方式提交参数  判断是否为ie浏览器    将jquery.qqFace.js表情转换成微信的字符码  手机端省市区联动  新字体引用本地运行可以获得，放到服务器上报404  C#提取html中的汉字 MVC几种找不到资源的解决方式  使用Windows服务定时去执行一个方法的三种方式
		
    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...
    
		
    6. 
						
  6. 织梦M手机端/自适应网站内容图片变形解决办法
		
    我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...
    
		
    7. 
						
  7. dedecms织梦手机端文章内容页图片不能自适应解决方法
		
    dedecms织梦手机端文章内容页图片不能自适应解决方法: 方法一修改手机端文章页模板代码: 找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}标签修改一下,改为如下的标签 ...
    
		
    8. 
						
  8. 解决clipboard.js在移动端复制失败的问题
		
    1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...
    
		
    9. 
						
  9. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
		
    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 1.4.2.3. SETUP（Core Data 应用程序实践指南）
			
    初始化Core Data的三个方法: init,初始化托管对象模型.持久化存储协调器.托管对象上下文 - (id)init { ) { NSLog(@"Running %@ '%@'&quo ...
    
			
    2. 
						
  2. JDBC-ODBC桥连接方式操纵SQL数据库
			
    /**  * 功能:演示使用JDBC-ODBC桥连接方式操纵SQL数据库  * 作者:徐守威  * 操作步骤:  * 1.配置数据源  * 2.在程序中连接数据源  * 3.操作数据  */ pack ...
    
			
    3. 
						
  3. js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例
			
    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...
    
			
    4. 
						
  4. MyBatis中的条件判断单引号双引号的使用
			
    对于字符串判断, <if test="aIn != 'A'" >会出现问题,系统会试图把'A'转成数字,改为 <if test='aIn != "A&q ...
    
			
    5. 
						
  5. Pomelo框架
			
    一个典型的多进程MMO运行架构, 如下图所示: pomelo框架的组成如图所示: 架构把游戏服务器做了抽象, 抽象成为两类:前端服务器和后端服务器, 如图: 前端服务器(frontend)的职责: 负 ...
    
			
    6. 
						
  6. 分析NGINX 健康检查和负载均衡机制
			
    nginx 是优秀的反向代理服务器,这里主要讲它的健康检查和负载均衡机制,以及这种机制带来的问题.所谓健康检查,就是当后端出现问题(具体什么叫出现问题,依赖于具体实现,各个实现定义不一样),不再往这个 ...
    
			
    7. 
						
  7. 关于angularjs过滤器的小尝试
			
    最近的项目中用到了angularjs,相比传统的jquery直接操作Dom, 开发web项目,angularjs在操作表格数据时的数据绑定,操作让我不禁直呼过瘾,好方便啊, 从后台接口传一个json过 ...
    
			
    8. 
						
  8. java版二叉树算法实现
			
    import java.util.ArrayList; class BinaryTree { private static class TreeNode { int data; TreeNode le ...
    
			
    9. 
						
  9. Professional C# 6 and .NET Core 1.0 - 37 ADO.NET
			
    本文内容为转载,重新排版以供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - 37 ADO.NET -------- ...
    
			
    10. 
						
  10. Java之英格玛简单实现以及加密验证码的应用
			
    最近看了一部电影<模仿游戏>,<模仿游戏>中艾伦·图灵破译英格玛让我对英格玛产生了好奇,于是就开始翻阅资料对其进行研究,但是毕竟智慧有限,所以我这里用Java实现一个简单的英格 ...
    
			
    11.