Ctrl+v 粘贴图片

最新推荐文章于 2024-07-20 13:40:16 发布

偷偷变胖

最新推荐文章于 2024-07-20 13:40:16 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_44538399/article/details/86727194

版权

这篇博客探讨了为何在网页中默认的文本框不能粘贴图片，以及如何通过创建可编辑div并监听粘贴事件，实现从剪贴板粘贴图片到网页的功能。作者指出，由于input标签的限制，需要使用contenteditable属性来允许图片粘贴，并解释了为何不使用textarea的原因。

摘要由CSDN通过智能技术生成

我们平常使用QQ或者微信聊天的时候都会用到Ctrl+V来粘贴文字或者图片，显得很理所当然。然而自己写的一个文本框或者文本域却只能粘贴文本，不能粘贴图片，这是为什么呢？
因为那个文本框并不是我们平常使用的input标签或者textarea标签，而是一个div。首先我们创建一个div，这个时候div还不可以当做文本框
在这里插入图片描述
这个时候在div加入contenteditable这个属性，设置为true，那这个div就可以输入了

<div id="myDiv" contenteditable="true"></div>

在这里插入图片描述

然后接下来就对这个可编辑div写方法

document.querySelector('#myDiv').addEventListener('paste',function(e){
   
    var cbd = e.clipboardData;
       var ua = window.navigator.userAgent;
       // 如果是 Safari 直接 return
       if ( !(e.clipboardData && e.clipboardData.items