鍍金池/ 問答/Java  HTML/ textarea 高度自動成長出現(xiàn)錯誤

textarea 高度自動成長出現(xiàn)錯誤

var scroll_Height = $('#content').get(0).scrollHeight;
      $('#content').css('height',scroll_Height + 'px');

      $('#content').on('input', function() {
        var scroll_Height = $('#content').get(0).scrollHeight;
        $('#content').css('height',scroll_Height + 'px');
      });
<textarea name="content" id="content" class="normal_input_admin" row="1"><?=$data['content'];?></textarea>

有一點怪異的是
當按下enter之後寬度會一直增加沒錯，看起來都正常
但是當我要後退 delete 刪除文字的時候（每一行）
他的高度只會 1px 的往下扣
假設我按Enter 三次後高度是 150px
但是我要刪除這三行變成一行的時候他高度竟然會是 148px 類似這種情形，沒有隨著我刪掉而改變真正的高度
請問是哪裡有問題？

回答
編輯回答
離觴
但是當我要後退 delete 刪除文字的時候（每一行）, 他的高度只會 1px 的往下扣

原因：

  1. scrollHeight的高度值為 內容區(qū) + padding，
  2. css('height')為 內容區(qū) + padding + border

本例中從你描述的現(xiàn)象看， textarea默認 上下border各是1px，padding是0px，即
實際上 scrollHeight一直比css('height')少2px，
當input事件每次觸發(fā)后，css('height')被賦值為比它小的scrollHeight，就會出現(xiàn)你看到的現(xiàn)象 "後退 delete 刪除文字的時候（每一行）, 他的高度只會 1px 的往下扣", 實際不是扣1px，是扣2px。

解決方案可采用 @月影 提供的。 原理是每次觸發(fā)輸入事件時，先取消textarea的高度（this.style.height = 'auto'），此時會出現(xiàn)滾動條，這么做的目的是讓scollHeight將等于文字的實際高度。 如果省掉這步，會發(fā)現(xiàn)在刪除文字時，撐高的scrollHeight并不會變化。

最終將 月影 的答案改寫成下面這樣, 可避免他的方案中textarea會出現(xiàn)輕微抖動的現(xiàn)象。

var scroll_Height = $('#content').get(0).scrollHeight;
$('#content').innerHeight(scroll_Height);


$('#content').on('input', function() {
    $(this).height('auto');
    $(this).innerHeight($(this)[0].scrollHeight);
});
2017年3月9日 21:35
編輯回答
乞許

https://blog.csdn.net/zhuogan...

2018年9月21日 16:52
編輯回答
過客
 $("#content").get(0).onkeyup = function() {
        this.style.height = 'auto';
        this.style.height = this.scrollHeight + "px";
    }

textarea高度自適應

2018年6月22日 04:27