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

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

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

首先，百度了一下，看中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. ArcGisServer根据最大最小坐标换算瓦片行列号（转载）
			
    ArcGisServer根据最大最小坐标换算瓦片行列号 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端 ...
    
			
    2. 
						
  2. SqlParameter 使用
			
                SqlParameter[] param = new SqlParameter[]             {                 new SqlParameter ...
    
			
    3. 
						
  3. ExportExcel
			
    package cn.com.jansh.core.util; import java.awt.print.Book; import java.io.BufferedInputStream; impo ...
    
			
    4. 
						
  4. windows中如何查看某个端口被谁占用
			
    说明:本人操作系统为win7 x64,文章转自http://jingyan.baidu.com/article/3c48dd34491d47e10be358b8.html,加上本人的注释. 开始--- ...
    
			
    5. 
						
  5. redis 2 字符串 和 hash
			
    string是最简单的类型,一个key对应一个value,string类型是二进制安全的.redis的string可以包含任何数据,比如JPG图片或者序列化的对象 操作    set    设置key ...
    
			
    6. 
						
  6. js原生设计模式——9外观模式封装2(小型代码库YJ)
			
    <script type="text/javascript">    //小型代码库YJ封装    var YJ = {        //根据id获取元素       ...
    
			
    7. 
						
  7. Android的文件存储
			
    //文件的写入 String content1 = edt_file.getText().toString(); //用于文件的写操作 FileOutputStream fos=null; //缓冲输 ...
    
			
    8. 
						
  8. HDU5878(打表)
			
    I Count Two Three Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...
    
			
    9. 
						
  9. HDU5842
			
    Lweb and String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...
    
			
    10. 
						
  10. Hadoop学习笔记-003-CentOS_6.5_64_设置ssh免密码登录
			
    参考:http://blog.csdn.net/u010270403/article/details/51444677 虚拟机中共五个centos系统,每个系统有两个用户root和hadoop:cdh ...
    
			
    11.