Question

点击周围，我发现了大量说明，可以在添加更多内容时创建一个高度增长的文本区域。我已经能够很好地提炼它了。但是有一个问题，当我延伸到当前的scrollHeight时，垂直滚动条弹出，文本向上和向下流出textarea的顶部，然后脚本赶上并调整大小。但是文本做了一个垂直的摆动，随着textarea变长，它变得更加烦人。

我认为最好的解决方案是测试scrollHeight +额外行的总行高何时将超过clientHeight。这样，文本框将始终具有其下方另一行的完整空间。这样，新行不会推动文本，但是一旦它到达另一个空行，将在下面添加。它也必须与行高无关，所以我不能设置静态值来扩展。

我试过从样式中拉出lineHeight并将其添加到scrollHeight。

 if(this.scrollHeight + this.style.lineHeight > this.clientHeight){
   this.style.height = this.scrollHeight + this.style.lineHeight +"px";
 }

但我仍然有摆动。而且我不确定.style.lineHeight是否适合这种情况。

$(".growbox").keyup(function(event) {
  if (this.scrollHeight > this.clientHeight) {
    this.style.height = this.scrollHeight + "px";
  }
});

.growbox {
  width: 40%;
  height: 3em;
  overflow: hidden;
  resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <textarea class="growbox" name="growbox"></textarea>
</form>

调整textarea的大小摆动

0 个答案: