Question

我有一个基本的小HTML5项目，我拿了一小段你可以看到的剪辑：http://gyazo.com/4f3b37bc14b06344240ff8f4e48c9e79

我要做的是让下一个文字显示在文本框的底部，而不是顶部，基本上是bottom-to-top文本区域，但我找不到有关它的任何信息。我在Javascript中使用DOM生成所有这些，但只是一个普通的旧HTML / CSS示例就足够了。

阅读聊天表单top-＆gt; bottom感觉很奇怪，而且我不知道如何解决这个问题，只是想在webgl中为文本编写一个自定义容器，但这样做会浪费掉。

Answer 1

因此，您将文本附加到顶部而不是底部。

var txt = document.getElementById("yourId");
txt.value = "New String" + "\n" + txt.value;

我认为你实际上是在追求

function hasVertScrollbar(elem) 
{ 
    //see if there is a scrollbar, return true if there is
    return elem.clientHeight < elem.scrollHeight;
}

function addMessage (str) {
    
    var textarea = document.getElementById("txtArea");
    
    //remove all of the padding if there
    var val = textarea.value.replace(/^\n+/,"");
    //update the value with the new message
    val += (new Date()).toLocaleTimeString() + ": " + str + "\n";
    textarea.value = val;
  
    //Create a loop where we add a line break, Loop until we have a scrollbar.     
    var padding = [];
    while (!hasVertScrollbar(textarea)) {
       padding.push("\n");
       textarea.value = "\n" + textarea.value;
    }
    //After the loop we have one too many, so chop off the extra
    padding.pop();
    //update the textarrea with the padding and updated text
    textarea.value = padding.join("") + val;
    //scroll to bottom
    textarea.scrollTop = textarea.scrollHeight;
}

function chat(e) {
    var msg = document.getElementById("message");
    addMessage(msg.value);
    msg.value = "";
    e.preventDefault();
    return false;    
}

document.getElementById("frm").addEventListener("submit", chat, false);

#txtArea { width: 275px; height: 300px; display: block; }

<form id="frm">
    <textarea id="txtArea" readonly="readonly"></textarea>
    <label for="message">Message: </label><input type="text" id="message" /><button type="submit">Send</button>
</form>

现在使用textarea的问题是你不能为不同的用户使用不同的颜色。如果你真的想这样做，你将不得不使用div并插入brs或设置第一个元素的顶部填充。

Answer 2

使用div而不是textarea ......它会为您提供更多选择。

＆＃13;

.wrapper {
  display: table;
  width: 80%;
  height: 100px;
  margin-bottom: 10px;
}
.textarea {
  display: table-cell;
  vertical-align: bottom;
  border: 1px solid silver;
  overflow: auto;
  padding: 5px;
}

＆＃13;

<div class="wrapper">
  <div class="textarea">
    Here is some text that somebody sent to the chat area...
  </div>
</div>

<input type="text" placeholder="Type your message here"></input>
<button>Send</button>

＆＃13;

以反向显示文本区域中的行

2 个答案: