Question

我有一个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%);
}

Answer 1

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

DIV

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

Answer 2

如果您使用

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

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

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

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

Answer 3

这是基于两个主要功能appendChild和scrollIntoView的基本解决方案。前者将新的响应追加到列表中（作为日志）。第二个将视图固定在附加的最后一个元素中。

我们还需要使用

的大小来固定<ul>标签的高度

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;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Add text to the bottom of a div</title>
</head>

<body>
  <p id="prisoner"> Prisoner One </p>
  <br>
  <p id="command">address the prisoner:</p>
  <div id="prisonerResponse" class="overlay gradient">
    <ul id="commands"></ul>
  </div>

  <input type="text" id="text" name="text" value="">
</body>

</html>

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

3 个答案: