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

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

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

首先，百度了一下，看中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. Redis 排行榜 自己简单练习
			
    <?php class Ranks{ const PREFIX = 'zhengban'; protected $redis = ''; /* 初始化 */ public function __ ...
    
			
    2. 
						
  2. 为什么ajax 必须同源，same origin policy
			
    ajax 所有请求都会附带主域的cookie, 若没有同源策略,攻击者就可以获取你的cookie,状态.
    
			
    3. 
						
  3. idea 15破解方法记录
			
    So easy! Only one step.     注册时选择 License server ,填 http://idea.lanyus.com  对于Clion等同样适用.
    
			
    4. 
						
  4. Spring新下载地址
			
    Spring官网改版后找了好久都没有找到直接下载Jar包的链接,下面汇总些网上提供的方法,亲测可用. 1.直接输入地址,改相应版本即可:http://repo.springsource.org/lib ...
    
			
    5. 
						
  5. webstorm常用快捷键及插件
			
    子曰:工欲善其事,必先利其器.那么问题来了,前端开发用什么比较好? 我反正用的是webstorm,之前也花了一些时间看看别人的使用方式.下面分类介绍一下. 常用快捷键: double shift :  ...
    
			
    6. 
						
  6. mui中文在线手册及教程文档
			
    http://dev.dcloud.net.cn/mui/ui/index.html#mask http://ask.dcloud.net.cn/question/2403 http://ask.dc ...
    
			
    7. 
						
  7. jQuery学习笔记之jQuery.fn.init()的参数分析
			
    这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下   从return new jQuery.fn.init( selector, context, rootjQuer ...
    
			
    8. 
						
  8. ui-router---$stateProvider
			
    转自:http://blog.csdn.net/violet_day/article/details/17515157 $stateProvider $stateProvider.state(stat ...
    
			
    9. 
						
  9. Struts2拦截器介绍
			
    一.拦截器简介 Struts拦截器和Action的关系如图: 为了在使用拦截器时制定参数值,应通过<interceptor-ref -/>元素添加<param -/>子元素来为 ...
    
			
    10. 
						
  10. iOS 之 alcatraz (插件管理器)
			
    1. 安装 1.1. 打开命令行 curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/deploy/Scripts/ins ...
    
			
    11.