Chatbox文本转义<div>
Chatbox文本转义<div>
提问于 2015-07-17 14:18:06
现在我想创造一个假的“聊天”功能。现在的问题是，当我一次又一次地单击“发送”时，文本就会转义到div。是否有一种方法可以使div中的文本接近div边框时停止或形成滚动功能。我只能使用Html Javascript和CSS
function postchat(){
var node =document.createElement("p");
var content= document.getElementById("comment").value;
var comment= content;
var textnode = document.createTextNode(comment);
node.appendChild(textnode);
document.getElementById("allComment").appendChild(node);
}#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
}<body>
<div id="chatbox">
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-07-17 14:23:17
下面是如何制作滚动条：overflow-y: scroll; -参见下面。
我无法复制所描述的行为，在多次点击发送-你能详细说明吗？
function postchat(){
var node =document.createElement("p");
var content= document.getElementById("comment").value;
var comment= content;
var textnode = document.createTextNode(comment);
node.appendChild(textnode);
document.getElementById("allComment").appendChild(node);
}#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
overflow-y: scroll;
}<body>
<div id="chatbox">
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>
Stack Overflow用户
发布于 2015-07-17 14:21:05
设置overflow:auto
function postchat(){
var node =document.createElement("p");
var content= document.getElementById("comment").value;
var comment= content;
var textnode = document.createTextNode(comment);
node.appendChild(textnode);
document.getElementById("allComment").appendChild(node);
}#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
overflow: auto;
}<body>
<div id="chatbox">
<div id="allComment" style="font-size:10px; line-height:90%;" ></div>
</div>
<p>
<input type="text" id="comment"></input>
</p>
<input type="button" value="Send" onclick="postchat()" />
</body>
Stack Overflow用户
发布于 2015-07-17 14:22:09
您需要overflow:auto，这将不允许p标记溢出容器。
#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
overflow: auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31477975
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号