需求:复制平台链接文本
实现:
//复制文字
function copyText(text: string) {
var input = document.createElement("input");
input.value = text;
document.body.appendChild(input);
input.select();
navigator.clipboard.writeText(text);
document.body.removeChild(input); // 删除临时实例
console.log('链接复制成功!');//修改自己需要的提示
}
问题:
Clipboard 接口实现了 Clipboard API,如果用户授予了相应的权限,就能提供系统剪贴板的读写访问。在 Web 应用程序中,Clipboard API 可用于实现剪切、复制和粘贴功能。系统剪贴板暴露于全局属性 Navigator.clipboard 之中。如果用户没有适时使用 Permissions API 授予相应权限和"clipboard-read" 或 "clipboard-write" 权限,调用 Clipboard 对象的方法不会成功。部署线上将报错。
于是更改如下:但(document.execCommand即将废弃)后面还是使用复制插件为好。
// 先给要复制的文本或者按钮加上点击事件后,并将要复制的值传过来
async function copyText(val: string) {
if (navigator.clipboard && window.isSecureContext) {
hlAlert('链接复制成功!', 1);
return navigator.clipboard.writeText(val);
} else {
const textArea = document.createElement('textarea');
textArea.value = val;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
hlAlert('链接复制成功!', 1);
return new Promise((res: any, rej: any) => {
document.execCommand('copy') ? res() : rej();
textArea.remove();
})
}
}