之前发布过一篇文章原生 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以上，其他浏览器可以.
兼容性测试网站：/*/
