JS实现文本的一键复制

在开发网页应用时，很多时候都会遇到需要动态复制文本到剪贴板的需求。

代码如下：

async function toCopy(text){
	if (!!navigator.clipboard) {//支持clipboard api复制
		try {
			await navigator.clipboard.writeText(text);
			return;
		} catch (err) {
		    console.error('复制到剪贴板失败:', err);
		}
	}
	let dom = document.createElement('textarea');
	document.body.appendChild(dom);
	dom.style.position = 'fixed';
	dom.style.clip = 'rect(0 0 0 0)';
	dom.style.top = '10px';
	dom.value = text;// 赋值
	dom.select(); // 选中
	document.execCommand('copy', true); // 复制
	document.body.removeChild(dom); // 移除输入框
}

Clipboard API:

文本复制功能最简单的实现是使用Clipboard API。它无需浏览器权限申请，文字内容直接进入剪切板，代码简单，使用方便，同时是异步，不用担心阻塞。

需要注意的是：存在一定的兼容性问题,所以首先我们需要判断浏览器是否支持Clipboard API。

还有一个需要注意点:确保你在一个用户交互的上下文中调用 Clipboard.writeText()，比如在一个事件处理函数中，或者在用户点击按钮后。此外，你的网页必须是在一个用户可见并且交互式的上下文中，比如用户正在与之交互的标签页或窗口。

链接: https://fly63.com/course/34_1632