解决clipboard手机端无法复制的一种思路

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

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

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

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

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

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

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

官网的方案

1 new Clipboard('.btn', {
2     text: function(trigger) {
3         return trigger.getAttribute('aria-label');
4     }
5 });

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

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

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

 1 // 添加获取json
 2 Zepto(function ($) {
 3     $.getJSON('account/data.json', '?time='+new Date().getTime(), function (data) {
 4         let name = data.name;
 5
 6         document.getElementById("num").innerHTML = name;
 7
 8         var clipboard = new Clipboard('.btn', {
 9             text: () => name
10         });
11
12         clipboard.on('success', (e) => {console.log(e)
13             alert('微信号已复制，请打开微信，点击右上角+号，选择添加朋友，粘贴搜索')});
14
15         clipboard.on('error', (e) => console.log(e));
16     });

效果如下：

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>测试</title>
 6   <script src="dist/clipboard.min.js"></script>
 7   <script src="dist/zepto.min.js"></script>
 8   <script src="static/js/changeAccount.js"></script>
 9   <style>
10     .bg{11       width:100%;
12       height: 1500px;
13       background-color: #ccc;
14       text-justify: inter-cluster;
15       font-size: 100px;
16     }
17   </style>
18 </head>
19 <body>
20 <div class="btn">
21   <div class="bg">
22     背景
23   </div>
24   <p id="num"></p>
25 </div>
26 </body>
27 </html>

View Code

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

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

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

索性照着官方来，

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

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

能点击复制，

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

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

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

1 z-index:999;
2 opacity:0;

View Code

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

转载于:https://www.cnblogs.com/shahramLu/p/6501963.html

解决clipboard手机端无法复制的一种思路相关推荐

浏览器复制粘贴以及手机端webview复制粘贴
一.浏览器赋值粘贴 1.document.execCommand 这部分参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/ ...
html手机自动放大,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...
html页面手机自动缩放,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...
html手机端一键复制,一键粘贴复制功能-兼容IE9+及其移动端-clipboard.js
使用系统提供的剪贴板是一项基本的IT技能.作为一个开发者,相信你已经知道使用 Ctrl/Cmd+A, Ctrl/Cmd+C 以及 Ctrl/Cmd+V 组合键就能快捷地进行选中.复制.粘贴.但对于普通 ...
手机端实现复制链接功能
网上试了各种插件总是不能兼容安卓和苹果的各种浏览器目前兼容性不是很好经测试只支持安卓HTML5的浏览器后续如果有解决办法又继续更新 _url : 要复制的链接 select_txt: 隐藏的 ...
解决html5手机端滑动卡顿的现象
项目是混合开发,原生安卓和ios里面内嵌h5页面,在安卓里面滑动就不会卡顿,但是iso里面就卡卡卡,于是试便了全网,找到了这个解决办法,大家可以试试. 直接全局增加css样式就行 * {-webkit ...
uc浏览器手机端禁用复制
div { pointer-events: none;}
车架识别手机端只是一种？
车架识别手机端只是一种? 您在购车时最关注的的是什么?性能.外观.内饰.或者看看发动机,助力油什么的. 其实您错了,当然以上也是不可忽略的,只是有一个关注点比这些更重要,就是VIN码. 如下图这串由数 ...
《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
手机端网页中图片之间出现白线的解决方法
手机端网页中图片之间出现白线的解决方法参考文章: (1)手机端网页中图片之间出现白线的解决方法 (2)https://www.cnblogs.com/syzdidi/p/9686463.html 备 ...

解决clipboard手机端无法复制的一种思路

解决clipboard手机端无法复制的一种思路相关推荐

最新文章

热门文章