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>

Answers:

Answer

you actually have 2 options and both of them are not "natural" in a 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:

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

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 immitate a true textbox but this is just the concept:

<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

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.

Answer

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

Answer

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.

Answer

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/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.