我有

<html>
<textarea id='txt' style='height:500px; widht:400px'></textarea>
<input type='text' id='input'/>
<input type='button' id='clicMe' onkeypress='fillTxt()' />

<script>
function fillTxt(){
  if(event.keyCode == 13)
      document.getElementById('txt').value += document.getElementById('input').value + <br/>;
}
</script>
</html>

我想要的是,当我点击按钮时,文本进入文本区域并垂直对齐底部。意思是我添加的文本将附加到文本区域的底部
例子:
.-----------------------------.
|                             |
|                             |
|                             |
|  this is some text          |
'-----------------------------'

编辑:
我现在开始工作了
<div id="tBox" style="
    position:absolute;
    top:400px;
    left:220px;
    width:600px;
    height:334px;
    color:#666666;
    padding:5px;
    margin-bottom:25px;">

        <div id="tHolder" style="
            width:500px;
            height:300px;
            background-color:transparent;
            color:#008080;
            font-weight:bold;
            border-style:hidden;
            left:5px;
            background-color:transparent;
            position:relative;
            overflow:auto;">

            <p id="txt" style='position:absolute; bottom:0; left:0;'></p>

        </div>

        <input type="text" style="width:500px; position:absolute; bottom:15px; left:8px;" id="input" name="input" onkeydown="fillTxt()" />

</div>

最佳答案

you actually have 2 options从某种意义上说,它们都不是“自然”的,因为我们正在创造通常它们不会做的事情(但嘿,谁不会呢?)
第一个是一个内容可编辑的<p>标记,对齐后粘贴到容器的底部。我更喜欢这个,因为你的元素就像文本框一样。您可以选择并将光标放置在任何位置:

<div id="contentEditableDiv">
    <p id="editableP" contentEditable="true"></p>
</div>

#contentEditableDiv{
    width:300px;
    height:200px;
    margin:100px auto;
    border: 1px solid #000;
    background:#EEE;
    position:relative;
    overflow:auto;
}

#editableP{
    background:red;
    min-height:10px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

另一种选择是使用div作为样式的占位符,并与隐藏的文本区域同步。这需要更多的逻辑来产生一个真正的文本框,但这只是一个概念:
<div id="textArea">
    <span id="textHolder"></span>
</div>
<textarea id="hiddenTextArea"></textarea>​

#textArea{
    width:300px;
    height:200px;
    margin:100px auto;
    border: 1px solid #000;
    background:#EEE;
    position:relative;
    overflow:auto;
}
#hiddenTextArea{
    /*position:absolute;
    width:0;
    height:0;*/
}
#textHolder{
 position:absolute;
    bottom:0;
    left:0;
}
​

window.onload = (function(){

    var textArea = document.getElementById('textArea');
    var hiddenTextArea = document.getElementById('hiddenTextArea');
    var textHolder = document.getElementById('textHolder');

    textArea.addEventListener('click',function(){
        hiddenTextArea.focus();
    },false);

    hiddenTextArea.addEventListener('keyup',function(e){
        textHolder.innerHTML = hiddenTextArea.value;
    },false);


}());​

07-24 09:44
查看更多