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,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- Spring - Spring Boot - Thymeleaf - textual 模式
概述 thymeleaf 的 text 模式简单使用 过程会比较啰嗦, 需要结论的同学, 可以直接到底部去寻找 背景 想尝试做一个简单的 模板工具 目的 自动生成一些简单的 重复文本 思路 尽量简单 ...
- Learn from Niu 2020.1.21
1. 你一定要看计算机领域的文章. 如果你是看一堆应用,你最终还是会不知道怎么做. 从计算机到energy是降维打击, 当你学习了计算机的hot skill,再去做应用很容易. 2. 搞研究的思路: ...
- nginx location匹配及rewrite规则
location匹配规则 1. 实例 server{ location = \ { [配置A] } location / { [配置B] } location = /images/ { [配置C] } ...
- Linux, Nginx - Deepin linux手动安装nginx和出现的问题
安装步骤 切换至root su 安装依赖库 sudo apt-get install build-essential && sudo apt-get install libtool s ...
- 2019-08-05 纪中NOIP模拟B组
T1 [JZOJ1432] 输油管道 题目描述 请你帮忙设计一个从城市M到城市Z的输油管道,现在已经把整个区域划分为R行C列,每个单元格可能是空的也可能是以下7种基本管道之一: 油从城市M流向Z,‘+ ...
- java的jdk和jre区别
本文是本人随便总结的== 首先大概清楚个关系:jdk 包含 jre 包含 jvm 然后来看下,当我们配置完java运行环境的时候,是不是在java默认安装文件下发现jdk和jre两个包,然后jdk包里 ...
- kali2018.4 下载地址
https://www.linuxidc.com/Linux/2018-10/155088.htm
- AcWing 8.二维费用的背包问题
#include<iostream> #include<algorithm> #include<cstring> using namespace std ; ; i ...
- 微信环境中如何实现跳转到手机默认外部浏览器下载apk文件
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载.其实原来很简单,就是判断当前是在微信内置浏览器中 ...
- 自动化脚本-配置LVS(DR模式)
一,获取所需配置的主机IP cat get_ip.sh #!/bin/bash #将获得到的IP地址写进IP.txt >ip.txt #将原有的hosts信息清除 >/root/.ssh/ ...