Question

任何人都能说出为什么会这么开心？当我评论

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

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

谢谢！

我想在添加或删除行

时更改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>

Answer 1

您的代码不起作用，因为当您设置新高度时，您还会增加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

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

Answer 3

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

为什么高度不能改变textrea

3 个答案: