Cannot set rows for textarea once you set the scrollHeight

Question

After hours of trying to figure out where I went wrong, I finally found out that you cannot set the rows of the textarea once you set the scrollHeight for the textarea. Why is that happening, and how would we fix it?

<?php
include("ajaxLink.php");
?>

<textarea id = 'textarea' cols = '30' rows = '3' onkeydown = "changeIt()">
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
text text text text text text text text 
</textarea>

<script>

//******************************************************************

function changeIt() {

$('#textarea').height($('#textarea')[0].scrollHeight); 
document.getElementById('textarea').rows = 1000; 

} //end of function changeIt()
//******************************************************************

</script>

Obviously, this isn't the actual function that I'm using, and it's just here to serve as an example to prove that setting the rows of the textarea doesn't work after setting the scrollHeight.

@user2181397 Honesty, my code's really long. But don't worry, I'll make a example code, real quick. — jessica, Feb 09 '16 at 03:43
@mikegohome thats just an example. actual reason for needing this: textarea auto adjust to content using scrollHeight. Then as the user type more text in textarea it will grow bigger using javascript to set the rows. — jessica, Feb 09 '16 at 04:14
Look at this http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize — Leo, Feb 09 '16 at 04:43

score 0 · Accepted Answer · answered Feb 09 '16 at 04:26

I am not sure if this will serve you purpose but what I understand from comments is you want to auto adjust the textarea height on keydown. But I am not sure what is the requirement on blur.

I assume it will go back to it original height

CSS

textarea {
    min-height: 52px;
}

JS

$("#textarea").on('keydown',function(){
        $(this).height( 0 );
        $(this).height( this.scrollHeight );
      })
    $("#textarea").on('blur',function(){
       $(this).height(0);
    })

jsfiddle demo

I need both scrollHeight and setting the rows. they need to work in conjunction with each other. — jessica, Feb 09 '16 at 04:35

Cannot set rows for textarea once you set the scrollHeight

1 Answers1