关于html中textarea模块插入图片的问题

最新推荐文章于 2022-01-22 13:21:31 发布

张xiao明

最新推荐文章于 2022-01-22 13:21:31 发布

阅读量7k

点赞数 2

分类专栏：学习文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_43448686/article/details/106631920

版权

学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在html中，textarea对象是不能显示图片的，只能显示文字，于是我们只能使用间接的方式模拟textarea达到相同的效果。

html中div对象有个属性为contenteditable，它的值决定着该div对象控制的区域是否可编辑.当contenteditable设置为ture时，就可以手动编辑该区域。
附上代码
文字处理

 function EditShow(sender,content){
                     var element = document.getElementById("outputDLg");
                     element.innerText +=sender +" : " + content + "\r\n\r\n";
                     element.scrollTop = element.scrollHeight;
         
                     }

图片处理

function EditShowImage(sender){
                     var element = document.getElementById("outputDLg");
                     element.innerHTML += sender +" : " + "<img src=\"face.jpg\"  style=\"width:8%;height:20%;display:inline\"> </img> <br>";
                     element.scrollTop = element.scrollHeight;
                     }

效果图
在这里插入图片描述
全部代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试代码</title>
        <body>
            <div id = "app" style="width:1024px;height:500px">
                <div contenteditable="true" id="outputDLg" rows="3" cols="20" 
                style="width:100%;height:60%;background-color:#DBD9D8;overflow: auto;
                border-style:dotted;border-width:1px;border-color:8FBC8F;align:top" ></div>
                <input id="inputDLg" onkeypress="OnInputEnter()" style="width:100%;height:30%;border-style:dotted;border-width:1px;border-color:8FBC8F" />
                <button id="sendBtn"  onclick="OnSendBtn()" style="height:5%" >发送</button> 
                <script>
                    function OnSendBtn(){
                     EditShow("我",inputDLg.value);
                     EditShowImage("我");    
                    }
                    function EditShow(sender,content){
                     var element = document.getElementById("outputDLg");
                     element.innerText +=sender +" : " + content + "\r\n\r\n";
                     element.scrollTop = element.scrollHeight;
         
                     }
                     function EditShowImage(sender){
                     var element = document.getElementById("outputDLg");
                     element.innerHTML += sender +" : " + "<img src=\"face.jpg\"  style=\"width:8%;height:20%;display:inline\"> </img> <br>";
                     element.scrollTop = element.scrollHeight;
                     }
                     
                 </script>
            </div>       
        </body>
        
    </head>
</html>

上面的代码，如何多点几下发送会产生会产生bug，会导致上一条收到的图片无法预览。如图：
在这里插入图片描述
最文字处理部分经过修改，可正常显示

function EditShow(title,content){
	var element = document.getElementById("outputDLg");
	element.innerHTML += "<div>"+title +" : " +content+"</div> <br>";
	element.scrollTop = element.scrollHeight;
}

效果图如下
在这里插入图片描述
之所以出现这样的结果是因为innerText与innerHTML的不同导致的，
innerHTML可以解析HTML中的标签符号而innerText不能。例：

div.innerText = "我很<br>好啊";
div.innerHTML = "我很<br>好啊";

输出：

我很好<br>好啊
我很
好啊

张xiao明

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
关于html中textarea模块插入图片的问题

在html中，textarea对象是不能显示图片的，只能显示文字，于是我们只能使用间接的方式模拟textarea达到相同的效果。html中div对象有个属性为contenteditable，它的值决定着该div对象控制的区域是否可编辑.当contenteditable设置为ture时，就可以手动编辑该区域。附上代码文字处理 function EditShow(sender,content){ var element = document.getElement
复制链接

扫一扫