CODEWITHSUNDEEP
javascripthtmlcsstextarea
Khalid
Khalid

Reputation: 190

vertical-align text within a textarea

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>

Upvotes: 1

Views: 24922

Answers (5)

Joseph
Joseph

Reputation: 119827

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

Upvotes: 9

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Hi i thing you should give padding to textarea as like this 

    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/

Upvotes: -1

Neil Hillman
Neil Hillman

Reputation: 365

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.

Upvotes: 1

evotopid
evotopid

Reputation: 5429

Eventually you could add a text field in a div and set the distance between in the div and top of the textarea, and the bottom of the div and the bottom of the textarea.

Somehow you could auto hight the textarea, then it should work.

Upvotes: 0

Epuri
Epuri

Reputation: 300

This is something not possible through CSS. You might need JS code to determine height of textarea and add padding accordingly.

Upvotes: 0

Related Questions