vertical-align text within a textarea

javascript html css textarea

19,742

Solution 1

you actually have 2 options and both of them are not "natural" in the sense that we are creating things that normally they don't do (but hey, who doesn't?)

the first one is a content editable <p> tag aligned to stick to the bottom of a container <div>. I prefer this one since you just have elements that act like textboxes. you have select and the ability to land the cursor anywhere:

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

another option is to have a div as a placeholder for the style, and have a hidden textarea sync with it. this needs a bit more logic to imitate a true textbox but this is just the concept:

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>

Solution 2

Not sure this is possible, (to enter text at the bottom of the textarea).

Your best bet might be to define the number of rows in the textarea, (say height: 5em; line-height: 1em;), and then use javascript to add 4 linefeeds before your input text.

That or just have the textbox 1 row high, and pad it on the top to make it look like there are empty rows above.

19,742

Author by

Khalid

Updated on June 04, 2022

Comments

Khalid about 2 years

I have

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

what I want is that the when I click on the button the text gets inside the textarea and be vertically aligned bottom. Meaning the text I add will append to the bottom of the textarea

Example:

.-----------------------------.
|                             |
|                             |
|                             |
|  this is some text          |
'-----------------------------'

EDIT:

I got it working now

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