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. Ajax返回值一直获取不到啊

      原理: 同步异步的问题 Return 位置的问题     首先同步异步改为async : false,   Return 的值写在ajax外部  function submit_answer(){ ...

  2. oracle sqlplus链接和sid

    1.链接 ( 1.sqlplus /nolog 2.conn sys/sys@172.16.17.36/orcl as sysdba ) 2.sid   数据库名称 ----如:orcl 1.监听程序 ...

  3. Redis 数据结构的底层实现 (一) RealObject,embstr,sds,ziplist,quicklist

    一.realObject Redis使用 string list zset hash set 五大数据类型来存储键和值.在每次生成一个键值对时,都会生成两个对象,一个储存键一个储存值.redis定义了 ...

  4. POJ 3264 Balanced Lineup(ST模板)

    链接:http://poj.org/problem?id=3264 题意:给n个数,求一段区间L,R的最大值 - 最小值,Q次询问 思路:ST表模板,预处理区间最值,O(1)复杂度询问 AC代码: # ...

  5. 用eclipse中自带的jetty启动项目

    1.建立datasources.xml,创建jndi <jee:jndi-lookup id="datasource" jndi-name="jndiname&qu ...

  6. 题解 【Codeforces381A】 Sereja and Dima

    本题是很好的双指针练习题. 关于双指针,详见洛谷日报#73. 我们可以用两个指针l和r表示题中两人接下来要比较的数字,用fl标记下一个将要取的人,并分别用两个计数器统计双方的答案. 因此,我们有了如下 ...

  7. 多数据源切换-Druid

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_37279783/article/d ...

  8. input file弹出框选择文件后缀限制

    在页面选择文件时的弹出框默认显示的是所有类型的文件,有时候文件太多不好选择,我们就要过滤掉不想展示的文件,这是需要用到input的accept属性,只有在type="file"才有 ...

  9. Linux05——用户操作

    用户操作 1.新增用户(useradd 新用户名): 2.设置密码(passwd 用户名): 3.用户是否存在(id  用户名): 4.切换用户(su - 切换用户名) **—— **       s ...

  10. Diskpart手动创建EFI、MSR引导分区

    当给电脑加新硬盘时候,并且需要把新硬盘当作系统盘,有几种方法来为新硬盘创建引导分区: 可以选择用U盘刻录微软原版系统镜像,直接从U盘启动,然后直接创建分区,直接装,会自动为硬盘创建好几个引导分区. 进 ...