需求背景:
最近产品举办拉新活动,老用户可通过自己的分享链接向新用户分享自己的邀请码,新用户进入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 讲解