Question

我有

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

我想要的是当我点击按钮时文本进入textarea并垂直对齐底部。这意味着我添加的文本将附加到textarea的底部

示例：

.-----------------------------.
|                             |
|                             |
|                             |
|  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>

Answer 1

you actually have 2 options并且它们都不是“天生的”，因为我们正在创造通常不会做的事情（但是，嘿，谁没有？）

第一个是内容可编辑<p>标记，对齐以粘贴到容器<div>的底部。我喜欢这个，因为你只有像文本框一样的元素。你有选择和能够将光标放在任何地方：

<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作为样式的占位符，并使用隐藏的textarea同步。这需要更多逻辑来模仿真正的文本框，但这只是概念：

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


}());

Answer 2

不确定这是否可行，（在textarea的底部输入文字）。

您最好的选择可能是定义textarea中的行数（例如height：5em; line-height：1em;），然后使用javascript在输入文本之前添加4个换行符。

那或者只是将文本框设置为1行，并将其填充在顶部以使其看起来像上面有空行。

Answer 3

这是通过CSS无法实现的。您可能需要JS代码来确定textarea的高度并相应地添加填充。

Answer 4

最后你可以在div中添加一个文本字段，并设置div和div的顶部之间的距离，div的底部和textarea的底部。

不知何故，你可以自动提高textarea，然后它应该可以工作。

Answer 5

嗨，我应该像这样给textarea填充

    textarea{
width:400px;
    height:400px;
    padding-top:100px;
    -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
}

link here if you check live

http://jsfiddle.net/L5TJL/

textarea中的垂直对齐文本

编辑：

5 个答案: