为什么textrea的高度不能改变答案

【问题标题】：Why the height can not change of textrea为什么textrea的高度不能改变
【发布时间】：2014-09-11 08:57:11
【问题描述】：

任何人都可以说出为什么会这样吗？当我评论时

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

当我删除或添加 line 时，height1 显示 textarea 的正确高度，但是当我取消注释此行时，警报不正确，即使我删除了一行，高度只会越来越高。

谢谢！

我想在添加或删除行时更改此文本区域的高度

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

【问题讨论】：

标签： javascript height

【解决方案1】：

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

【讨论】：

【解决方案2】：

在 lat 我发现了这个，即使我不知道这个细节，它也可以工作。

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

【讨论】：

【解决方案3】：

您的代码不起作用，因为当您设置新高度时，您还增加了 scrollHeight。但是，当您删除一行时，它不起作用，因为浏览器首先解析函数，然后调整 textarea 的大小。

我只是放了一些控制台日志以获得更好的解释。我所做的只是按回车键，然后按退格键。

$("#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"));
});

按 Enter 键时的控制台输出

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

按退格键时的控制台输出

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

这就是你可能需要的：https://stackoverflow.com/a/17772322/3413052

【讨论】：