Why the height can not change of textrea

Question

Any one can tell why this happns? when I comment

//  $(this).css("height",height1);

the height1 show correct height of textarea when I delete or add line , but when I uncomment this line, the alert is not correct, even I delete a line, the height only grow more and more.

Thanks!

I want to make this textarea height changes when I add or delete lines

<textarea style="width:380px;height:auto" name="MeStatusDes" id="MeStatusDes" ></textarea>

<script>

    $("#MeStatusDes").keyup(function(e){
        height1 = this.scrollHeight +  "px";
        alert(height1);
        $(this).css("height",height1); // when I uncomment this, all alert is correct
    });
</script>

score 1 · Answer 1 · edited May 23 '17 at 11:50

Your code doesn't work because when you set the new height you also increase the scrollHeight. However it doesn't work that way when you delete a row because the browser first resolves the function and then resizes the textarea.

I just put some console logs for a better explanation. All I did was hit enter and then backspace.

$("#MeStatusDes").keyup(function(e){
    height1 = this.scrollHeight +  "px";
    console.log('scrollHeight: ' + height1);
    console.log('current height: '+ $(this).css("height"));
    $(this).css("height",height1);
    console.log('new height: '+ $(this).css("height"));
});

Console output when pressing Enter Key

scrollHeight: 36px
current height: 32px
new height: 36px

Console output when pressing backspace Key

scrollHeight: 40px
current height: 36px
new height: 40px

Here is what you probably need: https://stackoverflow.com/a/17772322/3413052

score 0 · Answer 2 · answered Jul 25 '14 at 02:47

at lat I find this and it works even I did not know detail of this.

var minRows = 5;
var maxRows = 26;
function ResizeTextarea(id) {
    var t = document.getElementById(id);
    if (t.scrollTop == 0)   t.scrollTop=1;
    while (t.scrollTop == 0) {
        if (t.rows > minRows)
                t.rows--; else
            break;
        t.scrollTop = 1;
        if (t.rows < maxRows)
                t.style.overflowY = "hidden";
        if (t.scrollTop > 0) {
            t.rows++;
            break;
        }
    }
    while(t.scrollTop > 0) {
        if (t.rows < maxRows) {
            t.rows++;
            if (t.scrollTop == 0) t.scrollTop=1;
        } else {
            t.style.overflowY = "auto";
            break;
        }
    }
}

score 0 · Answer 3 · answered Jul 25 '14 at 02:57

var minRows = 5;
var maxRows = 26;

 function ResizeTextarea(id){
  var t = document.getElementById(id);
  if (t.scrollTop == 0)   t.scrollTop=1;
  while (t.scrollTop == 0){
   if (t.rows > minRows)
    t.rows--;
   else
    break;
   t.scrollTop = 1;
   if (t.rows < maxRows)
    t.style.overflowY = "hidden";
   if (t.scrollTop > 0){
    t.rows++;
    break;
   }
  }


  while(t.scrollTop > 0){


   if (t.rows < maxRows){
    t.rows++;
     if (t.scrollTop == 0) t.scrollTop=1;
   }
   else{
    t.style.overflowY = "auto";
    break;
   }
  }
 }

Why the height can not change of textrea

3 Answers3