问题描述:

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>

网友答案:

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


}());​
网友答案:

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.

网友答案:

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/

网友答案:

I don't think you can do that unless you add white spaces manually

网友答案:

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

网友答案:

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.

相关阅读:
Top