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

在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 +" : " + "  
"
; element.scrollTop = element.scrollHeight; }

效果图
关于html中textarea模块插入图片的问题_第1张图片
全部代码如下

<!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 +" : " + "  
"
; element.scrollTop = element.scrollHeight; } </script> </div> </body> </head> </html>

上面的代码,如何多点几下发送会产生会产生bug,会导致上一条收到的图片无法预览。如图:
关于html中textarea模块插入图片的问题_第2张图片
最文字处理部分经过修改,可正常显示

function EditShow(title,content){
	var element = document.getElementById("outputDLg");
	element.innerHTML += "
"+title +" : " +content+"

"
; element.scrollTop = element.scrollHeight; }

效果图如下
关于html中textarea模块插入图片的问题_第3张图片
之所以出现这样的结果是因为innerText与innerHTML的不同导致的,
innerHTML可以解析HTML中的标签符号而innerText不能。例:

div.innerText = "我很
好啊"
; div.innerHTML = "我很
好啊"
;

输出:

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

你可能感兴趣的:(学习)