版权声明：转载请注明出处—— https://blog.csdn.net/chy555chy/article/details/85989234
首先，要清楚一点，不是所有的元素都支持复制粘贴的。目前知道的有以下几种
<input type="text"/>
仅支持单行文本输入，不支持换行<textarea></textarea>
只支持文字（不支持图片），当文字超出高度时会显示滚动条- 属性contenteditable被赋为true的div或span，如
<div contenteditable="true"></div>
支持文字和图片，当文字超出高度时，元素会自动改变高度适应文字，并不会出现滚动条
（所以像CSDN这类的文本编辑器，还有网页QQ等，一般都用这种方式实现编辑功能）
clipboardData 里面的元素都是以JSON形态保存的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
textarea {
width: 100%;
min-height: 50vh;
background-color: GhostWhite;
}
#textarea {
width: 100%;
min-height: 50vh;
background-color: SeaShell;
}
</style>
<script>
function addListener() {
document.body.addEventListener('paste', (e)=>{
if (e.clipboardData && e.clipboardData.items) {
for (let i = 0; i < e.clipboardData.items.length; i++) {
let item = e.clipboardData.items[i];
console.log(item)
switch(item.kind) {
case "string":
const str = item.getAsString((str)=>{
console.log(str);
});
break;
case "file":
const file = item.getAsFile();
console.log(file);
break;
default:
console.log(item.kind);
break;
}
}
}
});
}
window.onload = ()=>{
addListener();
}
</script>
</head>
<body>
<textarea></textarea>
<div id="textarea" contenteditable="true"></div>
</body>
</html>