Question

I want to make a dynamic textarea, it should increase in rows as the content increase.

I am using this code:

$("#text_textarea").keyup(function(e) {
    //splitting textarea value wrt '\n' to count the number of lines
    if ($(this).val().lastIndexOf('\n')!=-1)
    var x = $(this).val().split('\n');
    $(this).attr( "rows" , x.length+1 );
});

But it fails when user continues to write without giving any new line \n (pressing Enter).

Answer 1

var keyUpTimeout = false; // Required variables for performance
var keyupTimer = 0;

$("#text_textarea").keyup(function(e) {
    var cooldownTimeout = 500;
    //Set the cooldown time-out. The height check will be executed when the user
    // hasn't initiated another keyup event within this time
    
    var ths = this;
    function heightCheck(){
        keyupTimer = false;
        // Reset height, so that the textarea can shrink when necessary
        ths.style.height = "";

        // Set the height of the textarea
        var newheight = this.scrollHeight + 2;
        ths.style.height = newheight + "px";
    }
    if(keyupTimeout){ //Has a cooldown been requested?
        clearTimeout(keyupTimer); //This+next line: Refresh cooldown timeout.
        keyUpTimer = setTimeout(heightCheck, cooldownTimeout);
        return; //Return, to avoid unnecessary calculations
    }
    
    // Set a cooldown
    keyupTimer = setTimeout(heightCheck, cooldownTimeout);
    keyupTimeout = true; //Request a cooldown
});

This piece of script will change the height of the textarea to fit the text inside.

Update

I have added an additional feature: To improve performance (changing the CSS height requires a significant amount of computer power), I have added a cooldown effect: The height check will only be executed when the user hasn’t initiated a keyup event for 500 milliseconds (adjust this value to meet your wishes).