uniapp实现复制功能时,在ios设备上会出现白色框
// 使用uni封装好的api
uni.setClipboardData({
data: this.info.sim[text],
success: function() {
uni.showToast({
title: '复制成功',
duration: 2000,
icon: 'none'
});
},
fail: function(err) {
uni.showToast({
title: '复制失败',
duration: 2000,
icon: 'none'
});
},
})
原因:setClipboardData底层原理是使用createElement动态创建textarea的方式再给textarea赋值,将创建好的节点插入至body,再调用浏览器的拷贝方法,最后删除该节点实现复制。此时在ios设备运行时,创建textarea需要设置只读状态,出现的白框其实就是手机的默认调起软键盘,解决方案如下:
// 复制
copyText(text) {
if (!this.info.sim[text]) {
return
}
const textareaC = document.createElement('textarea')
textareaC.setAttribute('readonly', 'readonly') // 设置只读属性防止手机上弹出软键盘
textareaC.value = this.info.sim[text]
document.body.appendChild(textareaC)
textareaC.select()
document.execCommand('copy')
uni.showToast({
title: '复制成功',
duration: 2000,
icon: 'none'
});
document.body.removeChild(textareaC)// 移除DOM元素
}