JS 实现一键复制功能

需求背景：

最近产品举办拉新活动，老用户可通过自己的分享链接向新用户分享自己的邀请码，新用户进入APP完成填写邀请码，官方给新老用户奖励。为方便用户快速复制邀请码，故有此需求。

技术实现：

一、Document.execCommand() 方法

HTML

<div id="codeBox">xxxxxx</div>
<div id="btn" class="btn">点击复制邀请码</div>

 JS

$(".btn").on('click', function() {
    var node = document.getElementById('codeBox');
	window.getSelection().selectAllChildren(node);
	//console.log(document.execCommand("Copy"));
    //​document.execCommand()的返回值是一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。
    var copy = document.execCommand("Copy");
	if (copy) {
		document.execCommand("Copy");
		console.log('复制完成')
	} else {
		console.log('由于浏览器版本问题，复制失败，请手动复制~')
	}
})

PS: 根据MDN文档说明，这个方法目前已经被废弃，但是在一些浏览器上还是可以使用，官方建议尽量不使用此方法。

MDN文档链接地址

如果此方法被正式删除，那该使用什么方案实现剪贴板复制功能呢？

二、Clipboard API

此时JS代码改为：

//navigator.clipboard属性返回 Clipboard 对象，所有操作都通过这个对象进行。
//如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个 API。
var clipboardObj = navigator.clipboard;
if(clipboardObj){
	$(".btn").on('click',async function(){
		await navigator.clipboard.writeText('test copy')
	})
}

项目剪贴板的需求已满足，之后等有时间继续完善 Clipboard API 的其他方法 

附上 Clipboard API 文档：Clipboard API 文档

附上大佬对 Clipboard API 的讲解：Clipboard API 讲解