html 一键复制 ios,h5实现一键复制到粘贴板 兼容ios
之前发布过一篇文章原生 js 实现点击按钮复制文本,后来发现在ios的safari上失效。现又找到一个解决方案。
实现原理
采用document.execCommand('copy')来实现复制到粘贴板功能
复制必须是选中input框的文字内容,然后执行document.execCommand('copy')命令实现复制功能。
初步实现方案
const input = document.querySelector('#copy-input');
if (input) {
input.value = text;
if (document.execCommand('copy')) {
input.select();
document.execCommand('copy');
input.blur();
alert('已复制到粘贴板');
}
}
兼容性问题
1、input 输入框不能hidden或者display: none;如果需要隐藏输入框可以使用定位脱离文档流,然后移除屏幕
#copy-input{
position: absolute;
left: -1000px;
z-index: -1000;
}
2、ios下不能执行document.execCommand('copy')
在ios设备下alert(document.execCommand('copy'))一直返回false
查阅相关资料发现ios下input不支持input.select();
因此拷贝的文字必须存在,不能为空字符串,不然也不会执行复制空字符串的功能
主要是使用textbox.createTextRange方法选中输入框的文字
// input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
function selectText(textbox, startIndex, stopIndex) {
if (textbox.createTextRange) {//ie
const range = textbox.createTextRange();
range.collapse(true);
range.moveStart('character', startIndex);//起始光标
range.moveEnd('character', stopIndex - startIndex);//结束光标
range.select();//不兼容苹果
} else {//firefox/chrome
textbox.setSelectionRange(startIndex, stopIndex);
textbox.focus();
}
}
3、ios设备上复制会触发键盘弹出事件
给input加上readOnly只读属性
运行代码
h5实现一键复制到粘贴板 兼容ios
h5实现一键复制到粘贴板 兼容ios
copy
const copyText = (text) => {
// 数字没有 .length 不能执行selectText 需要转化成字符串
const textString = text.toString();
let input = document.querySelector('#copy-input');
if (!input) {
input = document.createElement('input');
input.id = "copy-input";
input.readOnly = "readOnly"; // 防止ios聚焦触发键盘事件
input.style.position = "absolute";
input.style.left = "-1000px";
input.style.zIndex = "-1000";
document.body.appendChild(input)
}
input.value = textString;
// ios必须先选中文字且不支持 input.select();
selectText(input, 0, textString.length);
if (document.execCommand('copy')) {
document.execCommand('copy');
alert('已复制到粘贴板');
}else {
console.log('不兼容');
}
input.blur();
// input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
function selectText(textbox, startIndex, stopIndex) {
if (textbox.createTextRange) {//ie
const range = textbox.createTextRange();
range.collapse(true);
range.moveStart('character', startIndex);//起始光标
range.moveEnd('character', stopIndex - startIndex);//结束光标
range.select();//不兼容苹果
} else {//firefox/chrome
textbox.setSelectionRange(startIndex, stopIndex);
textbox.focus();
}
}
};
// 复制文字
// 必须手动触发 点击事件或者其他事件,不能直接使用js调用!!!
// copyText('h5实现一键复制到粘贴板 兼容ios')
/*兼容性补充:
移动端:
安卓手机:微信(chrome)和几个手机浏览器都可以用。
苹果手机:微信里面和sarafi浏览器里也都可以,
PC:sarafi版本必须在10.2以上,其他浏览器可以.
兼容性测试网站:https://www.caniuse.com/*/
html 一键复制 ios,h5实现一键复制到粘贴板 兼容ios相关推荐
- h5实现一键复制到粘贴板 兼容iOS
copyText = (text) => {// 数字没有 .length 不能执行selectText 需要转化成字符串const textString = text.toString();l ...
- html 一键复制 ios,h5实现一键复制到粘贴板-兼容ios
实现原理 采用document.execCommand('copy')来实现复制到粘贴板功能 复制必须是选中input框的文字内容,然后执行document.execCommand('copy')命令 ...
- h5 实现一键复制到粘贴板 兼容iOS
效果展示 先贴上测试连接 http://cdn.foundao.com/zhaosheng/copytext 实现原理 采用 document.execCommand('copy') 来实现复制到粘贴 ...
- ios下js复制到粘贴板_h5实现一键复制到粘贴板 兼容ios
实现原理 采用document.execCommand('copy') 来实现复制到粘贴板功能 复制必须是选中input框的文字内容,然后执行document.execCommand('copy') ...
- 通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)
通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器) 1.业务需求: vue项目需要通过点击button按钮将指定内容复制到粘贴板中,且不引入第三方组件. 2.解决方案: js写法如下(这里是 ...
- 【js】vue项目中实现点击复制过滤条件,获取并处理粘贴板内容
前情提要 有这样一个需求:每次重复选过滤条件太麻烦啦,需要一个可以复制过滤条件的功能!过滤条件类似下图. 主要步骤 第一步:复制工具的选取.这里我选用的是原生的Document.execCommand ...
- 用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)
一.如果只考虑IE浏览器,可以直接用原声js实现 if(window.clipboardData){//清空操作系统粘贴板window.clipboardData.clearData();//将需要复 ...
- ios java aes_PHP7 AES加密解密函数_兼容ios/andriod/java对等加解密
**PHP7.0 7.1 7.2 7.3 AES对等加解密类 函数文件_兼容ios/andriod/java等** 由于新项目规划要求使用PHP7.2开发环境,但在部分新系统中仍需使用AES加解密方式 ...
- iOS开发那些事--创建基于故事板的iOS 6的HelloWorld
基于故事板的HelloWorld工程 Storyboard(故事板)是用来替代xib的技术,也是iOS 5最重要的新特性之一.我们用Storyboard(故事板)重构HelloWorld. 使用故事板 ...
- H5一键复制 兼容iOS
浏览器原生剪贴板 navigator.clipboard 1. 写入 navigator.clipboard.writeText navigator.clipboard.writeText('需要复制 ...
最新文章
- 仓库管理常见问题及价值
- 年度书单盘点 | 史上最卷考研潮过后,这十本书让你不再迷茫
- 简单实现Dedecms RSS全站输出
- 【增强】FI行项目报表增强任意字段
- 机器学习——支持向量机SVM之线性模型
- 莫侵残日噪,正在异乡听
- win定时关机_电脑定时关机,你造吗?
- k8s的job和CronJob
- 技巧:Eclipse阿里代码规范插件
- VoLTE业务端到端流程
- 【运动控制篇】(7)路径跟踪及组合动作方向
- 【生信分析】Analyzing RNA-seq data with DESeq2:输入数据和差异表达分析
- 一切的闹闹哄哄,只是他在水帘洞躲避风沙那晚做的一个梦
- HIVE SQL分位数percentile使用方法案例
- 2023最新行业圈子系统小程序/语音房APP/短视频APP/商城APP/相亲APP/开黑陪玩APP
- 命令行实现URL编解码
- 微信公众号Makrdown编辑器,语法你懂吗?
- 妙啊!用扩散模型生成蛋白质结构,结果不输天然蛋白质|来自斯坦福微软
- Redis学习笔记(B站狂神说)(自己总结方便复习)
- Python实现常见泛洪攻击
热门文章
- Latex的一些排版技巧
- 机器人开发--AGV控制系统
- c语言注释中文,Comments(注释符)
- python复数类型的虚部通过什么表示_在python中复数怎么表示
- Android 图片压缩详解
- 手机内存带宽和分辨率
- 使用 K3S 创建本地开发集群
- 应用计算机测定线性电阻伏安特性实验结论,线性电阻和非线性电阻伏安特性曲线测定实验报告(共8篇).docx...
- Android微信授权登录
- matlab圆锥曲线,Matlab软件在高中数学圆锥曲线学习过程中应用.doc