H5 兼容IOS安卓的原生Js复制功能
<a @click="copyClick">复制</a>
copyView() {
let temp = ’要复制的内容‘;
return temp;
},
copyClick() {
// 数字没有 .length 不能执行selectText 需要转化成字符串
const textString = this.copyView();
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();
this.selectText(input, 0, textString.length);
console.log(document.execCommand('copy'), 'execCommand');
if (document.execCommand('copy')) {
document.execCommand('copy');
this.$vux.toast.text('地址已复制!', 'middle')
}
input.blur();
},
// input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
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();
}
}