1.JS复制原理:

  被复制内容的元素不能被其他元素遮盖,否则无效.  (设置opacity透明为0,不可以设置display:none);

2.常规的复制方法

function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择需要复制内容的对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />

这会带来两个问题: select()方法只能用于选中input \ textarea元素中的内容  ;   这种复制方法在ISO中不兼容无法复制.

3.下面重点来了,说一种解决上述问题的方法:

 <div class="top">
<div class="copytxt" style="opacity:0;">13162087765</div>
<div class="txt">
<div class="box">请添加微信13162087765</div>
<button class="btn">复制微信号</button>
</div>
</div>
function copyArticle(event) {
const range = document.createRange();
range.selectNode(document.querySelector(".copytxt")); const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('Copy');
alert("复制成功!");
}
document.querySelector(".btn").addEventListener('click', copyArticle, false);

看过很多安卓ios做兼容的方法,认为这一种最为简单的!

(记录下和本文无关的问题: 父元素不设置宽度时,ios中子元素浮动有间距, 设置margin-left: -3px;这种主要工作时,做移动端H5页面没做专门响应式布局,只简单通过不设置宽度或宽度百分比....... 还是太懒了)

史上最简单JS复制功能,兼容安卓ios!的更多相关文章

  1. 史上最简单,一步集成侧滑(删除)菜单,高仿QQ、IOS。

    重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...

  2. [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例)

    [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...

  3. 史上最简单的 SpringCloud 教程

    史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)史上最简单的SpringCloud教程 | 第二篇: 服务消费者(rest+ribbon)史上最简单的Spri ...

  4. 史上最简单的 SpringCloud 教程 | 终章

    https://blog.csdn.net/forezp/article/details/70148833转载请标明出处:http://blog.csdn.net/forezp/article/det ...

  5. 史上最简单的 GitHub 教程

    史上最简单的 GitHub 教程 温馨提示:本系列博文已经同步到 GitHub,如有需要的话,欢迎大家到「github-tutorial」进行Star和Fork操作! 1 简介 GitHub 是一个面 ...

  6. (转) 史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现(Eureka)

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

  7. 史上最简单的SpringCloud教程 | 第十篇: 高可用的服务注册中心(Finchley版本)

    转载请标明出处: 原文首发于 https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f10-eureka/ 本文出自方志朋的博客 文章 史上最简单 ...

  8. 史上最简单的 MySQL 教程(十五)「列属性 之 自动增长」

    自动增长 自动增长:auto_increment,当对应的字段,不给值,或者是默认值,或者是null的时候,就会自动的被系统触发,系统会从当前字段中取已有的最大值再进行+1操作,得到新的字段值. 自增 ...

  9. 史上最简单的 SpringCloud 教程 | 第一篇: 服务的注册与发现Eureka(Finchley版本)

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f1-eureka/ 本文出自方志朋的博客 一.spring ...

随机推荐

  1. sass用法总结(持续更新中)

    官网:https://www.sass.hk/ 1,嵌套规则 1.1普通嵌套:Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器 1.2父选择器 &: ...

  2. sqli-labs(44)

    第四十四关 本关是基于盲注的,这里盲注主要是要没有报错信息,所以要采用盲注.这关与42关的区别就在于没有报错信息 过滤点: $username = mysqli_real_escape_string( ...

  3. 如何运行一个分布式的Maven项目

    本人也属于一个新手小白,之前在公司运行的项目也都不涉及到maven...但是前两天运行一个maven项目的时候发现,第一次接触这个还是蛮让我措手不及的.在这里整理下自己当时走的弯路,或者遇到的一些问题 ...

  4. springboot 集成 druid mybatis-plus

    通过这篇配置成功: https://www.cnblogs.com/shine-rainbow/p/9618100.html 不过 mybatis 3.4.6 一直maven下载失败,于是直接在官方那 ...

  5. python第一个程序:计算体脂率

    主要是为了提醒自己要——保重 height = input('请输入身高(m):') weight = input('请输入体重(KG):') age = input('请输入年龄:') sex = ...

  6. 浅谈2-SAT

    引入: 相信大家都了解过差分约束系统.差分约束系统的大体意思就是给出一些有某种关系的变量,问你是否有某种赋值使得这些关系全部成立 其实\(2-SAT\)的题目描述和这个很像(虽然解法不一样) 那么\( ...

  7. PDS常用快捷键

    绿色在Layout和Router中共用 1.PDS常用快捷键:2019-07-28 17:06:07 快捷键 说明 备注 shiftt + 左键双击 布线状态下,进行过孔放置   ctrl + 左键双 ...

  8. BOSCH汽车工程手册————混合驱动

    首先放一波资源,一千两百多页的pdf 链接:https://pan.baidu.com/s/15IsvHqOFCnqAKwY_SR4-lA提取码:6wmz 混合驱动 混合驱动有串联驱动并联驱动以及两种 ...

  9. JAVA基础面试汇总

    一.基础知识:1.JVM.JRE和JDK的区别:    JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性.                  java ...

  10. Centos下使用subversion

    Centos下使用subversion 1.安装 yum install subversion 2.创建版本库 a.mkdir -p /var/svn/repositories(创建版本库目录) b. ...