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

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

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

首先，百度了一下，看中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. zabbix3.0.4 部署History
			
    [root@zabbix-Test ~]# history     1  passwd root    2  exit    3  yum  install ntpd*    4  yum  inst ...
    
			
    2. 
						
  2. 最通用的ibatis.Net使用sql server存储过程返回分页数据的详细例子
			
    ibatis.Net是一个比较简单和灵活的ORM框架,今天我分享一个我的项目中使用sql server通用存储过程来分页的一个例子,用ibatis.Net框架统一返回分页数据为IList<Has ...
    
			
    3. 
						
  3. iOS 之 文件缓存
			
    对于信息量不是太大的数据,可以使用文件缓存来处理.文件缓存可以缓存字典和数组. 步骤一:创建路径 路径要一级一级往下创建,基本不用考虑创建失败的情况.但是如果创建失败了要怎么做呢?按道理应该提示出来. ...
    
			
    4. 
						
  4. iOS 开源库 之 AFNetWorking 2.x
			
    1. 网络请求的基本知识 2. Get/Post 请求的使用 3. 文件(图片)上传 4. 断点下载 5. 其它使用细节 6. 设计优良的地方
    
			
    5. 
						
  5. Selenium关于Page Objects
			
    介绍页面对象设计模式.一个页面对象表示在你测试的web页面用户交互的界面. 使用页面对象模式的有点: 创建可重用的代码可以在多个测试用例中使用 减少重复的代码量 如果用户界面改变,只需要修改一个地方  ...
    
			
    6. 
						
  6. 内容页获取当前栏目的上一级栏目ID
			
    发现V9在列表页可以用$parentid 得到当前栏目的父级ID,但在内容页这个函数的值却为空了,需要按下面的写法才行, V9 在内容页获取当前栏目的上一级栏目ID {$CAT[parentid]}  ...
    
			
    7. 
						
  7. Delphi流的操作
			
    一.流的概念 流简单说是建立在面向对象基础上的一种抽象的处理数据的工具,它定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员只需掌握对流进行操作,而不用关心流的另一头数据的真正流向.其实,流 ...
    
			
    8. 
						
  8. HDU1548：A strange lift(Dijkstra或BFS)
			
    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1548 题意:电梯每层有一个数,例如第n层有个数k, 那么这一层只能上k层或下k层,但是不能低于一层或高 ...
    
			
    9. 
						
  9. 部署Sharding分片
			
    这是一种将海量的数据水平扩展的数据库集群系统,数据分表存储在sharding 的各个节点上,使用者通过简单的配置就可以很方便地构建一个分布式MongoDB 集群. MongoDB 的数据分块称为 ch ...
    
			
    10. 
						
  10. boneCP的连接管理
			
    boneCP连接的实现 boneCP自己实现了标准的java.sql.Connection接口,除了会持有Connection对象之外,还会拥有一些属性用于标记连接的创建时间,空闲时间等. 比较重要的 ...
    
			
    11.