聊天框文本转义 <div>

Question

现在我想创建一个假的 "chat" 功能。现在的问题是，当我一遍又一遍地单击 "send" 时，文本会转义 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>

Answer 1

设置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>

Answer 2

您需要 overflow:auto 这将不允许 p 标签溢出容器。

#chatbox {
    width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow: auto;
}

Answer 3

在 CSS 上为 #chatbox 设置 overflow: auto;，这样当文本超过 div 的内容时，滚动条将出现在 [= =14=].

More info about overflow here.

overflow: auto; 将自动检测 X 和 Y 的溢出。

  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>

Answer 4

滚动条的制作方法如下：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>

Answer 5

使用 overflow:auto 或 overflow-y:scroll 应该适合你。

overflow: auto 将在必要时向所有方向滚动，而 overflow-y: scroll 将只滚动到垂直 (y) 轴。

#chatbox {
width:50%;
    text-align:left;
    background-color:#F7F7F7;
    height:250px;
    border:1px solid black;
    overflow-y: scroll;
    /*  overflow: auto */
}

聊天框文本转义 <div>

Chatbox text escapping <div>

html

javascript

css

jquery

chat