在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/Java  HTML/ textarea 高度自動(dòng)成長(zhǎng)出現(xiàn)錯(cuò)誤

textarea 高度自動(dòng)成長(zhǎng)出現(xiàn)錯(cuò)誤

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>

有一點(diǎn)怪異的是
當(dāng)按下enter之後寬度會(huì)一直增加沒(méi)錯(cuò)，看起來(lái)都正常
但是當(dāng)我要後退 delete 刪除文字的時(shí)候（每一行）
他的高度只會(huì) 1px 的往下扣
假設(shè)我按Enter 三次後高度是 150px
但是我要?jiǎng)h除這三行變成一行的時(shí)候他高度竟然會(huì)是 148px 類似這種情形，沒(méi)有隨著我刪掉而改變真正的高度
請(qǐng)問(wèn)是哪裡有問(wèn)題？

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

原因：

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

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

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

最終將 月影 的答案改寫(xiě)成下面這樣, 可避免他的方案中textarea會(huì)出現(xiàn)輕微抖動(dòng)的現(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
編輯回答
過(guò)客
 $("#content").get(0).onkeyup = function() {
        this.style.height = 'auto';
        this.style.height = this.scrollHeight + "px";
    }

textarea高度自適應(yīng)

2018年6月22日 04:27