JS-操作剪贴板

execCommand

copy复制

js复制文本内容的方法是document.execCommand; 但是该方法需要先选中input或者textarea元素中的内容

textarea.select();
document.execCommand('copy');

一般项目中是不允许插入一个显示的输入框； 所以我们通常是创建一个隐藏的输入框 -> 赋值 -> 选中 -> 复制；

var textarea = document.createElement('textarea');
textarea.style.cssText = 'position:fixed;pointer-events:none;z-index:-9999;opacity:0;' // 保证输入框不可见
textarea.setAttribute('readonly', ''); // 输入框只读，不可写入
textarea.value = '复制的文本。。。';
document.body.appendchild(textarea);
textarea.select();
document.execCommand('copy');

paste粘贴

document.execCommand('paste');

注意

execCommand是一个同步方法，所以当复制内容非常大时，会出现卡顿，必须等复制的操作结束了，才能继续执行后续代码；

Clipboard API

是下一代的剪贴板操作方法，所有操作都是异步的，返回Promise对象；
通过调用navigator.clipboard返回Clipboard对象，所有操作都通过该对象进行；
浏览器支持不是很好；
因为用户可能会把密码等敏感信息放入剪贴板，允许js任意读取会产生安全风险，所以该API的限制比较多；
在chrome中规定，只允许https页面使用，开发环境（localhost）允许使用; 调用时需要用户授权，写write自动授予，读read会弹出通知，让用户选择是否允许；
api读取的是当前页面的剪贴板，所以在开发者工具中运行代码会报错，因为当前操作的是开发者工具页面，而不是有效的浏览器窗口，可以使用setTimeout延迟执行代码，然后迅速切换回浏览器窗口；

if(navigator.clipboard === undefined){
	//浏览器不支持
}

Clipboard.readText()

读取剪贴板中的文本数据；

async function getClipboardContents() {
	const text = await navigator.clipboard.readText();
	console.log(text);
}

navigator.clipboard.readText()
	.then(()=>console.log('读取剪贴板成功'))
	.catch(()=>console.log('读取剪贴板失败'))

Clipboard.writeText()

操作复制，把文本内容写入剪贴板；

async function copyPageUrl() {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
}

navigator.clipboard.writeText(location.href)
	.then(()=>console.log('copy成功'))
	.catch(()=>console.log('copy失败'))