I'm trying to create a textarea that automatically re-sizes upwards. I've got a bit of code that works fine at resizing by pushing the bottom down but I need it so all the content in the text area moves up to reveal a new line and the base of the text-area is fixed in its position. (Let me know if I didn't explain that very well!) The code I have so far is:

document.getElementById('texttype').addEventListener('keyup', function () {
    this.style.height = 0;
    this.style.height = this.scrollHeight + 'px';
}, false);

I'm trying to create a textarea that automatically re-sizes upwards. I've got a bit of code that works fine at resizing by pushing the bottom down but I need it so all the content in the text area moves up to reveal a new line and the base of the text-area is fixed in its position. (Let me know if I didn't explain that very well!) The code I have so far is:

document.getElementById('texttype').addEventListener('keyup', function () {
    this.style.height = 0;
    this.style.height = this.scrollHeight + 'px';
}, false);

• javascript

• What you mean by resize upwards? – Ali Gajani Commented Jan 4, 2014 at 11:40
• What do you want this example to do ? It's working probably right: jsfiddle/cdDWz – e382df99a7950919789725ceeec126 Commented Jan 4, 2014 at 11:48
• For example on Facebook if you reach the bottom of the text area for a status update it adds more room below what is already written by expanding the area downwards. In that instance the top of the text area is in a fixed position. I want to do a similar thing but have the bottom of the text area fixed and give more room by pushing the text that's been written up to reveal a new, empty line. – Jack Clarke Commented Jan 4, 2014 at 11:52
• Like this, you mean? – tewathia Commented Jan 4, 2014 at 12:10
• Exactly like that! I knew it would be something really simple - thanks a lot! – Jack Clarke Commented Jan 4, 2014 at 12:12

2 Answers 2

This was answered by Tewathia in the ments but I thought I should add an answer so I could check it off. Fiddle: http://jsfiddle/afQmf/

HTML:

<div><textarea name="" id="texttype"></textarea></div>

CSS:

    div {
    position:relative;
    height:200px;
}

   #texttype {
    width:200px;
    position: absolute;
    bottom:0;
}

Javascript:

    document.getElementById('texttype').addEventListener('keyup', function () {
    this.style.height = 0;
    this.style.height = this.scrollHeight + 'px';
    }, false);

automatically re-sizes up- and downwards HTML:

<textarea onkeyup="autoGrow(this)"></textarea>

Javascript:

function autoGrow (oField) {
    if (oField.scrollHeight > oField.clientHeight) {
        oField.style.height = oField.scrollHeight "px";
    }else{
        oField.style.height = 0+"px";
        oField.style.height = oField.scrollHeight "px";
    }
}