1、在做点击按钮复制功能时遇到了小小的卡顿,此处遇到了两种系统手机的兼容性 / 复制后会对文本进行选中 / 输入法弹出 等。现将方法进行总结,如下代码很好对解决了以上问题,适用性强。

2、在文本此处使用p标签或者div标签都可

<div class="copy-font">
<div class="uuid-code" id="content">saidfh3is21111h</div>
<button class="btn-copy" id="copyBT">复制</button>
</div>
3、采用对原生js,首先对需要复制对文本进行选中节点,检测设备中是否含有其他的复制文本缓存,进行清除。

将需要复制的文本进行赋值,并调用dom对象的copy功能,返回复制成功提示。

<script type="text/javascript">
function copyArticle(event) {
const range = document.createRange();
range.selectNode(document.getElementById('content'));

const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制成功!");
}

document.getElementById('copyBT').addEventListener('click', copyArticle, false);
</script>

js兼容安卓和IOS的复制文本到剪切板的更多相关文章

  1. HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题

    1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...

  2. jquery 一键复制文本到剪切板

    <a id="copy" data-clipboard-text="123456">复制文本</a> $(function(){ var ...

  3. 用clipboard.js实现纯JS复制文本到剪切板

    以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它.ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器 ...

  4. JS复制文本到剪切板

    1.首先引入js文件, <script src="dist/clipboard.min.js"></script> 2.初始化 <script typ ...

  5. vue 复制文本到剪切板上

    1.下载clipboard.js npm install vue-clipboard2 --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard ...

  6. jquery 复制文本到剪切板插件(非 flash)

    原创插件,转载请声明出处!!! jquery.copy.js 内容如下: /*! * jQuery Copy Plugin * version: 1.0.0-2018.01.23 * Requires ...

  7. 兼容安卓和ios实现一键复制内容到剪切板

    实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  8. Unity3d 复制文字到剪切板及存储图像到相册

    游戏中里开发分享功能时用到两个小功能:1.复制一个链接到剪切板供在其他应用粘贴分享使用,2.保存一张二维码图像到相册供发送给其他应用用于分享.但是在unity中无法完成,需要分别开发相应的插件. An ...

  9. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

随机推荐

  1. 2019牛客训练赛第七场 C Governing sand 权值线段树+贪心

    Governing sand 题意 森林里有m种树木,每种树木有一定高度,并且砍掉他要消耗一定的代价,问消耗最少多少代价可以使得森林中最高的树木大于所有树的一半 分析 复杂度分析:n 1e5种树木,并 ...

  2. [CF467C] George and Job - DP,前缀和

    简单dp + 前缀和 你谷这乱标难度的风气真是-- #include <bits/stdc++.h> using namespace std; #define int long long ...

  3. 文艺平衡树 lg3391(splay维护区间入门)

    splay是支持区间操作的,先做这道题入个门 大多数操作都和普通splay一样,就不多解释了,只解释一下不大一样的操作 #include<bits/stdc++.h> using name ...

  4. 实体的时间date属性的字段之表单提交

    @InitBinder public void initBinder(WebDataBinder binder) { DateFormat dateFormat = new SimpleDateFor ...

  5. layui之弹出层关闭和刷新问题

    本篇文章是根据本人实际开发的例子来讲的,不一定适用各位看官的情况 描述: 主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图: 1是主页面,2是子弹窗,3是孙弹窗 功能一:好了,第一个我要实现 ...

  6. LOJ138 类欧几里得算法

    类欧几里得算法 给出 \(T\) 组询问,每组用 \(n, a, b, c, k_1, k_2\) 来描述.对于每组询问,请你求出 \[ \sum_{x = 0} ^ {n} x ^ {k_1} {\ ...

  7. L2-1 分而治之

    思路 这题的意思是,如果把这些点打掉,其他的点是否能够完全不连通. 用并查集,或者打上标记之后,判断每个点是否还能到达其他点,如果一个点可以到达其他任何点,都应该输出否. 代码 #include &l ...

  8. sofa

    来源:http://fangpeng123456789.iteye.com/blog/2172745 sofa  app:       biz:业务实现层(业务类型)       common:    ...

  9. rancher布控集群启动失败的猜测

    rancher布控集群启动失败的猜测 待办 报告缺少某个文件.多线程启动任务部署的时候某些线程跑在前边了, 导致问题出现 或者 网络问题出现超时,导致出现此类报错 或者 内存不足导致问题出现报错 或者 ...

  10. ieee-explore文献免费下载办法

    假设文献网址为:http://ieeexplore.ieee.org/document/xxxxxxx/ 下载保存的话,改为http://ieeexplore.ieee.org.sci-hub.tw/ ...