Clipboard Api

剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象。 在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

1.实例方法

Clipboard Api的实例方法在navigator.clipboard对象上

read()

作用：请求获取剪贴板内容，在解析承诺时将数据传递给返回的 Promise。

• 与 readText() 不同，该方法可以返回任意数据，例如图像。

语法：

var promise = navigator.clipboard.read();

readText()

作用：解析系统剪贴板的文本内容返回一个Promise

• 当剪切板有东西时，浏览器会首先请求获取剪切板内容

<div class="box"></div>
<script>
    const box = document.querySelector(".box");
    const p = navigator.clipboard.readText().then((res) => {
        box.innerHTML = res;
    });
</script>

write()

作用：写入图片等任意的数据到剪贴板。这个方法可以用于实现剪切和复制的功能。

返回值：当数据被写入到剪贴板的时候，Promise 的resolve 回调被执行。如果剪贴板不能完成剪贴操作，Promise的reject 回调被执行。

语法：

var promise = navigator.clipboard.write(dataTransfer)

示例：

function setClipboard(text) {
    let data = new DataTransfer();

    data.items.add("text/plain", text);
    navigator.clipboard.write(data).then(function() {
        /* success */
    }, function() {
        /* failure */
    });
}

writeText()

作用：可以写入特定字符串到操作系统的剪切板。

返回值：一个Promise，一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）

语法：

navigator.clipboard.writeText("内容").then(function() {
  alert('复制成功')
}, function() {
  alert('复制失败')
});

2.剪切板事件

事件	描述
oncopy	该事件在用户拷贝元素内容时触发
oncut	该事件在用户剪切元素内容时触发
onpaste	该事件在用户粘贴元素内容时触发

document.addEventListener('copy',()=>{
    console.log('用户复制了内容')
})
document.addEventListener('cut',()=>{
    console.log('用户剪切了内容')
})
document.addEventListener('paste',()=>{
    console.log('用户粘贴了内容')
})