CODEWITHSUNDEEP
javascript
Jack Clarke
Jack Clarke

Reputation: 159

Dynamically resize textarea upwards

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

Upvotes: 3

Views: 6604

Answers (2)

zipfelQ
zipfelQ

Reputation: 1

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

Upvotes: 0

Jack Clarke
Jack Clarke

Reputation: 159

This was answered by Tewathia in the comments but I thought I should add an answer so I could check it off. Fiddle: http://jsfiddle.net/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);

Upvotes: 3

Related Questions