史上最简单JS复制功能,兼容安卓ios!
2024-08-28 04:12:56
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页面没做专门响应式布局,只简单通过不设置宽度或宽度百分比....... 还是太懒了)
最新文章
- 服务治理要先于SOA
- JSON字符串解析
- C#使用IrisSkin2.dll美化WinForm程序界面
- HDU 1513 Palindrome(最长公共子序列)
- UVALive 7040	Color (容斥原理+逆元+组合数+费马小定理+快速幂)
- mysql 正则
- css3实现小米商城鼠标移动图片上浮阴影效果
- Java中&#39;&;&#39;与、&#39;|&#39;或、&#39;^&#39;异或、&#39;<;<;&#39;左移位、&#39;>;>;&#39;右移位
- 什么是jetty
- python 发送邮件例子
- 写一个函数int get(),这个函数运行一次可以从V[N]里随机取出一个数,而这个数必须是符合1/N平均分布的
- WebStorm主题设置
- Srtuts2实现登录界面(不连接数据库)报错(一)
- Redis应用之[限制访问频率]
- 关于AXI_Quad_SPI的寄存器配置
- Helm 安装 nginx-ingress 的方法
- 在ASP.NET MVC4中使用Quartz.NET执行定时任务
- python&;pandas 与mysql 连接
- 学习笔记——线程 Thread
- RAID和LVM磁盘阵列
热门文章
- [CSP-S模拟测试]:点亮(状压DP+树上背包DP)
- scrum例会报告+燃尽图01
- 使用EXSI创建虚拟机
- 线程同步synchronized理解
- SpringMvc@RequestParam 来映射请求参数
- Android 带你读懂事件分发
- ListView 中如何优化图片?
- redis-主从复制、读写分离
- 阶段3 2.Spring_09.JdbcTemplate的基本使用_2 JdbcTemplate的概述和入门
- Python学习之==>;循环