textarea 高度自動成長出現錯誤

火爆浪子
  • 2.8k
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 類似這種情形,沒有隨著我刪掉而改變真正的高度
請問是哪裡有問題?

回复
阅读 1.3k
3 个回答
✓ 已被采纳
但是當我要後退 delete 刪除文字的時候(每一行), 他的高度只會 1px 的往下扣

原因:

  1. scrollHeight的高度值为 内容区 + padding,
  2. css('height')为 内容区 + padding + border

本例中从你描述的现象看, textarea默认 上下border各是1px,padding是0px,即
实际上 scrollHeight一直比css('height')少2px,
当input事件每次触发后,css('height')被赋值为比它小的scrollHeight,就会出现你看到的现象 "後退 delete 刪除文字的時候(每一行), 他的高度只會 1px 的往下扣", 实际不是扣1px,是扣2px。

解决方案可采用 @月影 提供的。 原理是每次触发输入事件时,先取消textarea的高度(this.style.height = 'auto'),此时会出现滚动条,这么做的目的是让scollHeight将等于文字的实际高度。 如果省掉这步,会发现在删除文字时,撑高的scrollHeight并不会变化。

最终将 月影 的答案改写成下面这样, 可避免他的方案中textarea会出现轻微抖动的现象

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


$('#content').on('input', function() {
    $(this).height('auto');
    $(this).innerHeight($(this)[0].scrollHeight);
}); 
 $("#content").get(0).onkeyup = function() {
        this.style.height = 'auto';
        this.style.height = this.scrollHeight + "px";
    }

textarea高度自适应

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏