博客

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

  • Post author:
  • Post category:其他


在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>好啊
我很
好啊


版权声明：本文为weixin_43448686原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。