我有一个 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 方面以最小化地表示问题）：
<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%);
}
