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

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

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

首先，百度了一下，看中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. java_web学习(12)JDBC
			
    数据持久化       持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,特别是企业级应用,数据持久化意味着将内存中的数据保存到硬盘上加以”固化”,而持久化的 ...
    
			
    2. 
						
  2. delphi字符串操作函数一览
			
    首部 function SameText(const S1, S2: string): Boolean; $[SysUtils.pas 功能 返回两个字符串是否相等 说明 不区分大小写 参考 < ...
    
			
    3. 
						
  3. jpg图片在开发板上显示
			
    文件IO项目: 在开发板屏幕上循环显示目录里的图片 a.按照一定的间隔循环显示目录里的bmp图片 b.实现手指滑动来显示目录里的图片(bmp,jpg)上一张,下一张 d1: 1.能操控屏幕(查询开发板 ...
    
			
    4. 
						
  4. 定制自己的Unity脚本模板
			
    有时候想给脚本添加符合自己编程习惯的内容,或是一些个性化信息.而作为一个多多少少有点强迫症的人,这种东西要加就得每个脚本都加上,不然看着多不爽! 于是就得每添加一个脚本就去修改一下,很麻烦. 但是,在 ...
    
			
    5. 
						
  5. Memcached Client的释疑
			
    1.目前大多数php环境里使用的都是不带d的memcache版本,这个版本出的比较早,是一个原生版本,完全在php框架内开发的.与之对应的带d的memcached是建立在libmemcached的基础 ...
    
			
    6. 
						
  6. 在Flex中定义移动设备应用程序和启动屏幕
			
    创建移动设备应用程序容器 移动设备应用程序中的第一个标签通常是以下标签之一: <s:ViewNavigatorApplication> 标签用于定义只有一个部分的移动设备应用程序. < ...
    
			
    7. 
						
  7. I帧/P帧/B帧---术语解释
			
    视频压缩中,每帧代表一幅静止的图像.而在实际压缩时,会采取各种算法减少数据的容量,其中IPB就是最常见的.  简单地说,I帧是关键帧,属于帧内压缩.就是和AVI的压缩是一样的. P是向前搜索的意思.B ...
    
			
    8. 
						
  8. java Runtime类
			
    public class Test { public static void main(String[] args) throws UnsupportedEncodingException { Run ...
    
			
    9. 
						
  9. 如何：使用 Visual Basic 编写基于 Unity3D 的计算器
			
    随着 .NET 全平台战略的推进,微软正在让以 C# 为先锋的 .NET 拥有跨平台特性.这个过程中一直有人想知道其它 .NET 语言对跨平台的支持有什么改进,熟悉 C# 但是喜欢用 VB 的我也不例 ...
    
			
    10. 
						
  10. 【python基础】 Tkinter 之 几何管理器
			
    Tkinter支持三种几何管理器:网格管理器,包管理器,位置管理器 提示:由于每个管理器都有自己放置小构件的风格,最好不要在同一个容器中的小构件使用多个管理器.可以使用框架作为子容器以获取期望的布局. ...
    
			
    11.