JavaScript 获取粘贴时候的元素

旧城等待， 2022-04-10 12:20 191阅读 0赞

首先，要清楚一点，不是所有的元素都支持复制粘贴的。目前知道的有以下几种

*  `<input type="text"/>`  
    仅支持单行文本输入，不支持换行
 *  `<textarea></textarea>`  
    只支持文字（不支持图片），当文字超出高度时会显示滚动条
 *  属性contenteditable被赋为true的div或span，如`<div contenteditable="true"></div>`  
    支持文字和图片，当文字超出高度时，元素会自动改变高度适应文字，并不会出现滚动条  
    （所以像CSDN这类的文本编辑器，还有网页QQ等，一般都用这种方式实现编辑功能）

clipboardData 里面的元素都是以JSON形态保存的。

![在这里插入图片描述][20190107101714322.png]

<!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>

[20190107101714322.png]: /images/20220330/48719c00b3f8463b8268bf2abc857289.png