浏览器还为我们提供了剪切板的操作，clipBoard 也是 navigator 的一个属性。

首先，我们从常理来说，如果我们是系统的设计者，我们应该如何实现复制和粘贴，其实最简单的方案就是做成事件对吧，实际上确实有复制，剪切和粘贴的事件。

复制事件就是 copy 事件，剪切就是 cut 事件，粘贴就是 paste 事件。

document.oncopy = function (e) {
	console.log("用户复制了");
}
document.oncut = function (e) {
	console.log("用户剪切了");
}
document.onpaste = function (e) {
	console.log("用户粘贴了");
}

取消 copy 和 cut 事件的默认事件，可以让用户的复制操作获取不到内容，当然这也是治标不治本，用户可以直接打开控制台复制。

实际上，这样就可以监听到用户的复制粘贴和剪切，这三个事件的事件对象均为 ClipboardEvent 对象，这个事件对象上有一个属性为 clipboardData，可以获取用户复制、粘贴、剪切的数据，以及其 MIME 类型。这个对象是一个 DataTransfer 类型，是不是在 dragAPI 中见过，

document.onpaste = function (e) {
	e.preventDefault();
	console.log(e.clipboardData.getData("text/plain"));//可以拿到粘贴的内容
}

注意，所以我们其实无法在事件中直接拿到复制的文本，但是粘贴的时候我们才可以通过 e.clipboardData.getData 拿到粘贴的内容，我们可以阻止复制和剪切的默认事件，然后使用 e.clipboardData.getData 对象向剪切板内写入内容。

为了获取复制和剪切文本的内容，我们就需要使用 clipBoard 对象了

我们对剪切板的操作无非就是读和写，该方法提供了四个方法

• readText()：返回一个 Promise，可以用于读取剪切板内的纯文本，Promise 的数据就是读取到的数据
• writeText()：返回一个 Promise，可用于向剪切板写入一个数据，如果写入失败，那么 Promise 失败，一般是因为没有权限
• read()：返回一个 Promise，可用于读取剪切板，不只是文字，返回一个ClipboardItem 对象，可参考ClipboardItem - Web APIs | MDN
• write()：返回一个 Promise，可用于向剪切板存入数据，传入一个ClipboardItem 对象。

我们这里只关注纯文本操作，我们现在实现一个这样的功能，不管用户复制的是什么，我都在他复制的内容后面添加一串自定义文字

document.addEventListener("copy", e => {
	e.preventDefault();
	//获取到当前复制的是什么东西
	const choose = window.getSelection().toString();
	window.navigator.clipboard.writeText(choose + "---------凌凌版权所有");
});
document.addEventListener("cut", e => {
	e.preventDefault();
	//获取到当前剪切的是什么东西
	const choose = window.getSelection().toString();
	window.navigator.clipboard.writeText(choose + "---------凌凌版权所有");
});

如果我们要获取到用户选中的是什么内容，可以使用 window.getSelection() 方法，该方法返回一个 Selection 对象，该对象的 toString 方法可以直接返回选中文本的字符串。

注意，对于一些浏览器而言，clipBoard 只在 HTTPS 中可用。

这里需要注意，当我们读取剪切板上文字的时候，由于剪切板本身也属于用户隐私，所以也会有消息提示

console.log(navigator.clipboard.readText().then(d => {
      console.log(d);
}));