点击复制到剪切板,兼容pc,安卓,ios(execCommand,clipboard)

点击复制到剪切板,兼容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,完美解决。
注意:复制完成后清除掉定时器

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

湫风洛夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值