将文本添加到div（或其他元素）的底部 – 模拟聊天控制台

我有一个div应该收集文本，因为文本输入到输入框中（现在它只是重现输入，但后来它应该产生半智能响应。）

我希望文本显示在div的底部，在渐变的黑暗端。 我希望新文本始终位于底部，旧文本会上升到上部滚动区域的灰色。 In other words, I'd like to reach the effect like in a terminal or on a chat console.

该页面位于： http ： //mindseyetutoring.com/interrogate.html

这是我的代码（我将消除ajax方面以最小化代表问题）：

       function process(){ $('#userInput').keypress(function(e){ if (e.keyCode == 13){ var userTxt = $("#userInput").val(); $("#prisonerResponse").html(userTxt); } }) }    
 Prisoner One 
 
 
address the prisoner:
  
 
 
 
   

和一些CSS：

 #prisonerResponse { overflow: scroll; width: 350px; height: 100px; display: inline-block; margin: 10px; position: relative; } #prisonerResponse:before { content:""; width: 350px; height: 100px; position: fixed; background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); } 

Answer 1

我会用不同的方法来解决这个问题。 也许我错了，但听起来你想要模仿聊天控制台，以相反的顺序显示文本行。 在那种情况下，我会使用围绕DIV UL/LI结构; 不知怎的，我相信这是最快的方式，因为我们不关心前面的行 – 我们只是附加新的行，在UL元素的末尾添加另一个LI。 检查片段

 // JavaScript - Tested on IE11, Firefox, Chrome, Opera and Safari window.onload = function(){ var div = document.getElementById("wrapper"), ul = document.getElementById("list"), input = document.getElementById("text"), flag = false, li; input.onkeypress = function(e){ e = e || window.event; var charCode = (typeof e.which == "number") ? e.which : e.keyCode; if (charCode == 13) { li = document.createElement("LI"); li.innerHTML = input.value; ul.appendChild(li); li.scrollIntoView(); if(ul.offsetHeight >= div.offsetHeight && flag !== true){ ul.style.height = div.offsetHeight + "px"; flag = true; } document.getElementById("text").value = ""; } }; }; /* CSS */ #wrapper { position:relative; height:200px; width:300px; background-color:#fff; } #list { margin:0px; padding:0px; position:absolute; bottom:0px; left:0px; width:inherit; overflow:hidden; overflow-y:scroll; } #text { width:300px; }  
 
 
  

检查工作jsBin （在Firefox，Chrome，Opera和Safari上）或jsFiddle （在IE11上）

Answer 2

如果你使用

 $("#prisonerResponse").html(responseTxt + '\n'); 

它将用新的内容替换所有内容。

如果您只想在最后添加它，请使用append ：

 $("#prisonerResponse").append(responseTxt + '\n'); 

Answer 3

这是一个基于两个主要functionappendChild和scrollIntoView的基本解决方案。 前者在列表中附加新响应（作为日志）。 第二个修复了附加的最后一个元素中的视图。

我们还需要使用的大小来修复

标签的高度

 var wrapper = document.getElementById('prisonerResponse'); var commands = document.getElementById('commands'); var flag = false; window.onload = function() { var command; var input = document.getElementById('text'); document.getElementById("text").onkeypress = function(e) { e = e || window.event; var charCode = (typeof e.which == "number") ? e.which : e.keyCode; if (charCode == 13) { command = document.createElement('li'); command.innerHTML = input.value; commands.appendChild(command); command.scrollIntoView(); fixHeight() document.getElementById("text").value = ""; } }; }; function fixHeight() { if (commands.offsetHeight >= wrapper.offsetHeight && flag !== true) { commands.style.height = wrapper.offsetHeight + "px"; flag = true; } } 

 #prisonerResponse { position: relative; height: 100px; width: 350px; background-color: #fff; margin: 10px; } #prisonerResponse .overlay { width: 100%; height: 100%; z-index: 10; top: 0; left: 0; position: absolute; } #prisonerResponse .gradient { background-image: linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%); background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%); background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%); background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%); } #commands { margin: 0px; padding: 0px; position: absolute; bottom: 0px; left: 0px; width: inherit; overflow: hidden; overflow-y: scroll; } #text { width: 350px; display: inline-block; } 

        
 Prisoner One 
 
 
address the prisoner: