文本区域中的文本垂直对齐

vertical-align text within a textarea

本文关键字：文本 对齐 垂直 区域      更新时间：2023-09-26

我有 

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

你实际上有 2 个选项，它们都不是"自然的"，因为我们在创造通常他们不做的事情(但是，嘿，谁不呢？

第一个是内容可编辑的<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 id="contentEditableDiv">
        <p id="editableP" contentEditable="true"></p>
    </div>

另一种选择是将div 作为样式的占位符，并使其同步隐藏的文本区域。 这需要更多的逻辑来模仿真正的文本框，但这只是概念：

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);
    
    
    }());
#textArea{
        width:300px;
        height:200px;
        margin:100px auto;
        border: 1px solid #000;
        background:#EEE;
        position:relative;
        overflow:auto;
    }
    #textHolder{
     position:absolute;   
        bottom:0;
        left:0;
    }
    
<div id="textArea">
        <span id="textHolder"></span>
    </div>
    <textarea id="hiddenTextArea"></textarea>​

不确定这是否可行，(在文本区域底部输入文本(。

最好的办法可能是定义文本区域中的行数(例如高度：5em;行高：1em;(，然后使用 javascript 在输入文本之前添加 4 个换行符。

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

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

最终，

您可以在div 中添加一个文本字段，并设置div 和文本区域的顶部以及div 底部和文本区域底部之间的距离。

不知何故，您可以自动高文本区域，然后它应该可以工作。

嗨，

你应该像这样给文本区域填充 

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

如果您查看实时，请在此处链接

http://jsfiddle.net/L5TJL/

相关文章：