js兼容安卓和IOS的复制文本到剪切板
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的复制文本到剪切板的更多相关文章
- HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题
1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...
- jquery 一键复制文本到剪切板
<a id="copy" data-clipboard-text="123456">复制文本</a> $(function(){ var ...
- 用clipboard.js实现纯JS复制文本到剪切板
以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它.ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器 ...
- JS复制文本到剪切板
1.首先引入js文件, <script src="dist/clipboard.min.js"></script> 2.初始化 <script typ ...
- vue 复制文本到剪切板上
1.下载clipboard.js npm install vue-clipboard2 --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard ...
- jquery 复制文本到剪切板插件(非 flash)
原创插件,转载请声明出处!!! jquery.copy.js 内容如下: /*! * jQuery Copy Plugin * version: 1.0.0-2018.01.23 * Requires ...
- 兼容安卓和ios实现一键复制内容到剪切板
实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- Unity3d 复制文字到剪切板及存储图像到相册
游戏中里开发分享功能时用到两个小功能:1.复制一个链接到剪切板供在其他应用粘贴分享使用,2.保存一张二维码图像到相册供发送给其他应用用于分享.但是在unity中无法完成,需要分别开发相应的插件. An ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- 获取 Android APP 版本信息工具类(转载)
获取 Android APP 版本信息工具类 获取手机APP版本信息工具类 1.获取版本名称 2.获取版本号 3.获取App的名称 package com.mingyue.nanshuibeidiao ...
- 服务器上搭建使用SSH账户登录的Git仓库
1.安装git yum install -y git 2.创建git仓库保存的目录 mkdir /data/git_repo 3.初始化空仓库 cd /data/git_repogit init -- ...
- [NOI2015] 品酒大会 - 后缀数组,并查集,STL,启发式合并
[NOI2015] 品酒大会 Description 对于每一个 \(i \in [0,n)\) 求有多少对后缀满足 LCP 长度 \(\le i\) ,并求满足条件的两个后缀权值乘积的最大值. So ...
- 完整安装IIS服务
此文主要是针对前面提到的 IIS支持json.geojson文件 添加脚本映射时,提示找不到asp.dll时的解决方法. 主要参考了此文:http://www.kodyaz.com/articles/ ...
- bugku 有一张图,还单纯吗
下载图片后以多种方式打开.分析文件类型都没能找到flag.推测存在隐藏文件,即文件可分离. 注:文件分离需要 binwalk 工具,在Ubuntu操作系统下 binwalk 的安装方法可参考此博客:h ...
- 2.(group by)如何让分组后,每组中的数据按时间倒序排列(group by和 order by的分组按排列)
比如说有表devicedata: 问题: 现在我想将devicedata这个表中的数据,先按device_id这个字段分组,然后每组中的数据按时间字段ts从大到小的排列, 如何解决呢? 错误的sql: ...
- koa2第一天 安装koa2found 1 low severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details
安装全局koa2:npm install -g koa2 -generator 创建一个koa2文件夹:koa2 -e koa2 进入koa2文件夹:cd koa2 安装npm模块:npm insta ...
- Strange Bank(找零问题)
题目描述 为了使取钱变得困难,某家银行在一次操作中只允许其客户提取下列金额之一: 1日元(日本的货币) 6日元,62(=36)日元,63(=216)日元,… 9日元,92(=81)日元,93(=729 ...
- python记之Hello world!
________________________________该动手实践了. 数和表达式 交互式Python解释器可用作功能强大的计算器. 除法运算的结果为小数,即浮点数(float或floatin ...
- 使用表单对象时,报错 form is undefine
先看例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...