前言

我从小就有个梦想，我想拥有掌控一切的能力。但是今天我遇到了瓶颈--------------------用js监听复制和粘贴事件！为了掌控这一技能我翻阅了山和大海，终于！我悟了....

代码

总代码

window.addEventListener('copy',(e)=>{
        //取消默认复制
	e.preventDefault()
	let content=window.getSelection()
        //获取复制的text
	let textContent=content.toString()
        //获取复制的html
	let html=content.getRangeAt(0).cloneContents()
	let div=document.createElement('div')
	div.appendChild(html)
	let htmlContent=div.innerHTML
        //给剪切板赋值
	e.clipboardData.setData('text',htmlContent)
})
window.addEventListener('paste',(e)=>{
	e.preventDefault()
	let forcus=document.activeElement
	forcus.value+=e.clipboardData.getData('text')
})

复制文本

通常的复制都是屏蔽了文本的样式，代码如下：

window.addEventListener('copy',(e)=>{
        //取消默认复制
	e.preventDefault()
	let content=window.getSelection()
        //获取复制的text
	let textContent=content.toString()
        //给剪切板赋值
	e.clipboardData.setData('text',textContent)
})

复制样式

有时候我不想只是单单的复制文本，我连文本的样式也想复制，实现代码如下：

window.addEventListener('copy',(e)=>{
        //取消默认复制
	e.preventDefault()
	let content=window.getSelection()
        //获取复制的html
	let html=content.getRangeAt(0).cloneContents()
	let div=document.createElement('div')
	div.appendChild(html)
	let htmlContent=div.innerHTML
        //给剪切板赋值
	e.clipboardData.setData('text',htmlContent)
})

处理粘贴事件

有时候我需要对粘贴的内容进行过滤，过滤调一些奇奇怪怪的东西，可以用下面的代码：

window.addEventListener('paste',(e)=>{
	e.preventDefault()
        //获取当前聚焦的元素（一般都是input框，如果自己想要做其他的操作可以直接拿粘贴内容进行操作）
	let forcus=document.activeElement
        //给聚焦元素赋值
	forcus.value+=e.clipboardData.getData('text')
        //e.clipboardData.getData('text')获取粘贴内容的文本
        //e.clipboardData.getData('html')获取粘贴内容的HTML形式
})