点击复制到剪切板，兼容pc，安卓，ios（execCommand），解决execCommand返回false的坑

需求：在h5页面点击分享按钮后调接口拿到任务id，拼到地址后，将携带任务id的地址复制到剪切板。

一开始使用的是clipboard插件，正常复制静态内容没毛病，但是牵扯到ajax请求就出现问题，第一次点击复制失效，第二次点击会复制第一次的内容，因为每次获取的任务id都不一样，插件改起来也麻烦，所以抛弃clipboard，这里使用原生js实现，兼容性好。

废话不多说，上一段代码

//代码块2
copyText(url) { //url是需要复制的地址
window.getSelection().removeAllRanges();//清一次复制区域
let input = document.createElement('input')//创建一个input
let range = document.createRange();//创建复制区域
document.body.appendChild(input)//塞input
range.selectNode(input);//选择input
input.setAttribute('readonly', 'readonly')
//input调为只读，避免某些ios会弹出输入法
input.value = url//给input赋值
window.getSelection().addRange(range);//添加复制区域
input.select();//选中区域
input.setSelectionRange(0, input.value.length);//兼容IOS
if (document.execCommand('copy')) {//可以复制返回true，否则false
document.execCommand('copy')//复制
uni.showToast({ //提示
title: '已为您复制分享链接到剪切板。',
icon: "none"
})
} else {
uni.showToast({ //提示
title: '该浏览器不支持自动复制。',
icon: "none"
})
}
window.getSelection().removeAllRanges();
document.body.removeChild(input)
},

上面部分是大部分帖子中能看到的内容，解决ios兼容的问题，但是IOS在ajax中execCommand(‘copy’)会返回false，在安卓测和PC试没问题

//代码块1
let url = "接口返回的处理好的url"
var ajaxCheckTimer = setInterval(() => {
if (url) {
this.copyText(url)
clearInterval(ajaxCheckTimer);
};
}, 100);

处理方法加一个setInterval，等url处理好之后，在执行copy，完美解决。
注意:复制完成后清除掉定时器

感谢阅读，如有不对，还请指正。

最后

以上就是义气银耳汤为你收集整理的点击复制到剪切板，兼容pc，安卓，ios（execCommand，clipboard）点击复制到剪切板，兼容pc，安卓，ios（execCommand），解决execCommand返回false的坑的全部内容，希望文章能够帮你解决点击复制到剪切板，兼容pc，安卓，ios（execCommand，clipboard）点击复制到剪切板，兼容pc，安卓，ios（execCommand），解决execCommand返回false的坑所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。