js复制粘贴

前言

相信大家在平时上网的或者逛一些博客的时候，会出现文字无法复制或者说复制之后粘贴会带一些其他文字这种情况；还有那种可以在页面自动给你粘贴你刚才复制的一些内容；下面就给大家介绍一下这些功能是如何实现的。

---

提示：下面案例可供参考
先上页面结构

	<div>春天到了，桃花开了</div>
	<input type="text" name="">
	<div id="text"></div>

1.如何实现禁止复制：

window.addEventListener('copy',(e) => {
 	// 禁止复制
 	 e.preventDefault();
 })

很简单，就一个监听浏览器的copy事件然后阻止默认事件。

2.如何实现你复制的是你选中的代码，为啥最后粘贴的内容跟你复制的不一样或者在你复制的内容里面加上一些其他内容：

window.addEventListener('copy',(e) => {
 	navigator.clipboard.writeText('哈哈，你赋值不了')
 	navigator.clipboard.writeText(`${e.target.innerText}我是附加的数据`)
 })

上面两种方式分别对应两种功能，监听复制事件，然后通过window的navigator.clipboard.writeText方法重写内容

3.页面自动给你粘贴复制的内容

navigator.clipboard.readText().then(res=>{
	// 需要用户同意
	console.log(res)
	document.getElementById('text').innerText = res
})

通过调用navigator.clipboard.readText方法获取复制的值，当然浏览器会提示是否同意

注意：有没有发现上面的navigator.clipboard.readText方法后面用了啥，then方法，没错，这个方法返回的其实是一个promise对象

总结

以上就是复制粘贴的一些方法，如果有问题欢迎大家指正