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,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- Leetcode找三个数字的和满足xx条件的题目总结15➕16➕259
双指针最基础的题目是一个区间里找两个数字的和等于Target.首先将区间从小到大排序.接下来只要一个le指针,一个ri指针,分别从区间左右边界往中间推进即可.复杂度是排序的nlogn. 下面几道题都是 ...
- js面向对象的程序设计 --- 中篇(创建对象) 之 工厂模式和 构造函数模式
创建对象 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码. ·工厂模式 工厂模式是一种广为人知的设计模式,这种模式 ...
- c#窗体进度条
c#窗体进度条 //进度条的最大值 ; progressBar1.Maximum = Convert.ToInt32(a); ;i<progressBar1.Maximum;i++) { //进 ...
- 阿里云ECS服务器CentOS7配置vsftps及其问题解决
前言 之前只在虚拟机中配过FTP服务器,今天买了云服务器,发现安装vsftpd后就是连不上,通过搜索了很多资料,最后找到了解决办法,系统是CentOS7,服务器类型是ECS 阿里云安全组配置 首先进入 ...
- python面试的100题(2)
def print_directory_contents(sPath): """ 这个函数接收文件夹的名称作为输入参数 返回该文件夹中文件的路径 以及其包含文件夹中文件的 ...
- 通过java代码HttpRequestUtil(服务器端)发送HTTP请求并解析
关键代码:String jsonStr = HttpRequestUtil.sendGet(config.getAddress() + config.getPorts() + config.getFi ...
- String类中的equals方法总结(转载)
转载:https://blog.csdn.net/qq_25827845/article/details/53868815 1.String源码中equals大致写法: public boolean ...
- yii2 场景使用
场景定义 //场景 const SCENARIO_USER_CREATE='0';//前台用户新增 const SCENARIO_USER_UPDATE='1';//前台用户更新 场景配置 publi ...
- Go反射
一.引入 不同语言的反射模型不尽相同,有些语言还不支持反射.<Go 语言圣经>中是这样定义反射的: Go 语言提供了一种机制在运行时更新变量和检查它们的值.调用它们的方法,但是在编译时并不 ...
- spring 配置
在context中配置 如:在base-package指明一个包: <context:component-scan base-package="cn.edu.dao"/> ...