1.作用
- 在web应用程序中，当用户授予了相应的权限，Clipboard API 就能实现系统剪切板的复制、粘贴和剪切功能。
- 系统剪切板暴露在Navigator.clipboard 中。
2.例子
window.onload = () => {// 监听用户的复制事件document.addEventListener('copy', (e) => {// 阻止浏览器的默认复制行为 e.preventDefault()// 把复制的内容放到系统的剪切板中 // navigator.clipboard.writeText 的返回值是一个Promisenavigator.clipboard.writeText(e.target.innerText).then(() => {console.log('复制成功！');}).catch(() => {console.log('复制失败！');})})// 监听用户的粘贴document.addEventListener('paste', (e) => {// 验证输入const clipboardData = e.clipboardData;if (!clipboardData) {console.error('无效的输入。');return;}// 判断粘贴的是图片还是文本const files = clipboardData.files;if (files.length > 0) { // 图片e.preventDefault();const file = files[0];// 读取文件数据 转为base64字符串const reader = new FileReader();reader.onload = (event) => {// base64字符串 const data = event.target.result;let image = document.createElement('img')image.src = datadocument.querySelector('.editor').appendChild(image)};reader.onerror = (event) => {console.error('读取文件时出错。');};reader.readAsDataURL(file);} else { // 文本navigator.clipboard.readText().then((text) => {let divDom = document.createElement('div')divDom.innerHTML = text;document.querySelector('.editor').appendChild(divDom)console.log('粘贴成功！');}).catch((error) => {console.error('粘贴失败：', error);});}});
}
