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. mongodb多字段去重

    单字段去重 db.student.distinct("name"); 多字段去重 db.student.aggregate([{      $group:{            ...

  2. 在Ubuntu 18.04上安装Git

    步骤1.首先,通过运行以下命令确保您的系统和apt包列表完全更新: apt-get update -yapt-get upgrade -y 第2步.在Ubuntu 18.04上安装Git. 现在让我们 ...

  3. Python :元组,不可修改的序列

  4. 参考 ZTree 加载大数据量。加载慢问题解析

    参考 ZTree 加载大数据量. 1.一次性加载大数据量加载说明 1).zTree v3.x 针对大数据量一次性加载进行了更深入的优化,实现了延迟加载功能,即不展开的节点不创建子节点的 DOM. 2) ...

  5. 题解 P1203 【[USACO1.1]坏掉的项链Broken Necklace】

    [USACO1.1]坏掉的项链Broken Necklace 22892 破碎的项链 方法一:很容易想到枚举断点,再分别两头找,但是要注意很多细节 #include<iostream> # ...

  6. 使用Powershell开机启动隐藏窗口的程序

    1.打开注册表找到键值:计算机\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run 2.添加字符串值:StartJetSer ...

  7. kuangbin专题 专题九 连通图 HDU 4738 Caocao's Bridges

    题目链接:https://vjudge.net/problem/HDU-4738 题目:tarjan求桥,坑点: 题目说是分岛任务...如果所有岛之间没有完全连通,就不需要执行任务了...答案直接是0 ...

  8. 如何转proto

    找到对应协议在对应proto中的片段(片段的子也要提取),提出来 放到适合proto文件中(逻辑 || 功能近似协议聚集地) 转换成proto.js 替换 || 增加原有js内容

  9. go-redis 基于beego正确使用序列化存储数据和反序列化获取数据

    安装go-redis // 安装命令 go get github.com/gomodule/redigo/redis // 导入使用 import( "github.com/gomodule ...

  10. bzoj 4827: [HNOI2017]礼物 (FFT)

    一道FFT 然而据说暴力可以水70分 然而我省选的时候看到了直接吓傻了  连暴力都没打 太弱了啊QAQ emmmm 详细的拆开就看其他题解吧233 最后那一步卷积其实我一直没明白 后来画画图终于懂了 ...