Mostrar resultados
Primero pegue la conexión de prueba http://cdn.foundao.com/zhaosheng/copytext
Principio de realización
Utilice document.execCommand('copiar') para realizar la función de copiar en la mesa de trabajo
La copia debe ser el contenido de texto del cuadro de entrada seleccionado y luego ejecutar el comando document.execCommand('copiar') para realizar la función de copia.
Plan de implementación preliminar (no código completo):
// 此代码 在iOS下有bug,完整代码在最后贴出
const input = document.querySelector('#copy-input');
if (input) {
input.value = text;
if (document.execCommand('copy')) {
input.select();
document.execCommand('copy');
input.blur();
alert('已复制到粘贴板');
}
}
Problemas de compatibilidad
1. El cuadro de entrada de entrada no se puede ocultar ni mostrar: ninguno;
Si necesita ocultar el cuadro de entrada, puede usar el posicionamiento para separarse del flujo del documento y luego eliminar la pantalla
#copy-input{
position: absolute;
left: -1000px;
z-index: -1000;
}
2.Document.execCommand('copiar') no se puede ejecutar en ios
En el dispositivo ios, alert(document.execCommand('copy')) siempre devuelve falso.
Verifique la información relevante y descubra que la entrada en ios no es compatible con input.select();
Por lo tanto, el texto copiado debe existir y no puede ser una cadena vacía, de lo contrario, la función de copiar una cadena vacía no se ejecutará.
Consulte este blog para realizar la función de copia en ios https://blog.csdn.net/VLilyV /…
Utilice principalmente el método textbox.createTextRange para seleccionar el texto del cuadro de entrada
// 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. Copiar en un dispositivo ios activará un evento emergente de teclado
Agregue el atributo de solo lectura readOnly a la entrada.
el código
Después de pisar los pozos anteriores, el código resumido es el siguiente
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/
*/
dirección de Git https://github.com/zhaosheng8