在div（或其他元素）的底部添加文本 - 模拟聊天控制台 [英] Add text to the bottom of a div (or another element) - emulating chat console
问题描述
我有一个div，应该收集文本，因为文本被输入到输入框（现在它只是重现输入，但后来它应该产生半智能的响应。）
I have a div that should be collecting text as text is entered into the input box (right now it just reproduces the input, but later it should produce semi-intelligent responses.)
我想让文本显示在div的底部，在渐变的黑暗的一端。我想要新鲜的文字总是在底部和旧的文本上升到上滚动区域的灰色。 换句话说，我想在终端或聊天控制台中达到效果。
I want the text to appear at the bottom of the div, at the dark end of the gradient. I want fresh text to always be at the bottom and old text to rise up into the greyness of the upper scrolling area. 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方面以最小化代表问题）：
Here is my code (I'll eliminate the ajax aspect to minimally represent the problem):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="interroStyle.css">
<script src="jquery/jquery.js"></script>
<script>
function process(){
$('#userInput').keypress(function(e){
if (e.keyCode == 13){
var userTxt = $("#userInput").val();
$("#prisonerResponse").html(userTxt);
}
})
}
</script>
</head>
<body onload = "process()">
<p id="prisoner"> Prisoner One </p>
<br>
<p id="command" >address the prisoner:</p>
<input type="text" id="userInput" />
<div class="transcript" id="prisonerResponse">
<p>
</p>
</div>
</body>
</html>
和一些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%);
}
推荐答案
解决这个问题。也许我错了，但它听起来像你想模拟一个聊天控制台，以相反的顺序显示文本行。在这种情况下，我会使用 DIV 的 UL / LI 不知何故我相信这是最快的方式，因为我们不在乎以前的行 - 我们只是追加新的，添加另一个LI到UL元素的结尾。检查代码段
I would use a different way to solve this problem. Maybe I'm wrong but it sounds like you want to emulate a chat console, displaying the text lines in reverse order. In that case I would use UL/LI structure wrapped around a DIV; somehow I believe this is the fastest way since we don't care about the previous lines - we just append the new ones, adding another LI to the end of the UL element. Check the snippet out
// 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;
}
<!-- HTML -->
<div id="wrapper">
<ul id="list"></ul>
</div>
<input type="text" id="text" name="text" value="" />
检查工作 jsBin （在Firefox，Chrome，Opera和Safari上）或 jsFiddle （在IE11上）
Check the working jsBin (on Firefox, Chrome, Opera and Safari) or jsFiddle (on IE11)
这篇关于在div（或其他元素）的底部添加文本 - 模拟聊天控制台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
