html 一键复制 ios,h5实现一键复制到粘贴板-兼容ios

实现原理

采用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('已复制到粘贴板');

}

}

兼容性问题

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();

因此拷贝的文字必须存在，不能为空字符串，不然也不会执行复制空字符串的功能

参考这篇博客实现了ios下复制的功能 https://blog.csdn.net/VLilyV/…

主要是使用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只读属性

代码

踩完以上的坑，总结的代码如下

git地址 https://github.com/zhaosheng8…

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);

console.log(document.execCommand('copy'), 'execCommand');

if (document.execCommand('copy')) {

document.execCommand('copy');

alert('已复制到粘贴板');

}

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/

*/

.