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. 面试官所问的--Token认证

    写这一篇文章的来源是因为某一天的我被面试官提问:让你设计一个登录页面,你会如何设计? 我当时的脑子只有??? 不就是提交账号.密码给后台就搞定了呢? 不可能那么简单,我弱弱的想,难道要对密码加密?? ...

  2. nginx下载,安装,基础命令,和代理tomcat例子理解

    nginx代理讲的很好理解:https://www.cnblogs.com/ysocean/p/9392908.html 一.nginx应用场景: 1.反向代理(用的非常多) 客户端发出请求,反向代理 ...

  3. 转载:TDM协议

    转自http://www.wangdali.net/i2s/ 1. PCM简介 PCM (Pulse Code Modulation) 是通过等时间隔(即采样率时钟周期)采样将模拟信号数字化的方法.图 ...

  4. [SDOI2016] 生成魔咒 - 后缀数组,平衡树,STL,时间倒流

    [SDOI2016] 生成魔咒 Description 初态串为空,每次在末尾追加一个字符,动态维护本质不同的子串数. Solution 考虑时间倒流,并将串反转,则变为每次从开头删掉一个字符,即每次 ...

  5. C++——程序的结构

    1.作用域和可见性 1.1 函数原型中的参数其作用域仅在()内.因此参数名称可有可无,但是参数类型需要声明. 1.2 块作用域 在块中声明的标识符其作用域自声明处起,限于块中. 1.3 类作用域 类作 ...

  6. Apache-Tomcat-Ajp漏洞(CVE-2020-1938)漏洞复现(含有poc)

    Apache-Tomcat-Ajp漏洞(CVE-2020-1938)漏洞复现 0X00漏洞简介 Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可 ...

  7. JS jQuery 点击页面漂浮出文字

    看到有些网站点击页面任意地方都会弹出文字出来 感觉很炫酷 但其实实现方法很简单 哇哈哈哈~~~ // 调用 ( e, 消失毫秒, 数组, 向上漂浮距离) $(document).click(funct ...

  8. IntelliJ IDEA 2017.3尚硅谷-----配置 Tomcat

  9. DBContext基础查询

    https://www.cnblogs.com/gosky/p/5752001.html 遍历所有实体 //遍历所有学生 DBSet using (var db = new Entities()) { ...

  10. Java爬虫学习(2)之用对象保存文件demo(1)

    package com.mieba.spider; import java.util.ArrayList; import java.util.List; import java.util.Vector ...