flutter嵌套h5页面实现复制功能在ios会莫名出现白色框

335 阅读1分钟

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元素
}