javascript - 文本区域的动态高度

Question

有什么办法可以增加textarea的高度

<textarea class="form-control"></textarea>

而不是当输入超过字段的宽度和高度时我们得到的滚动特性？例如，如果用户输入 2 个段落，则整个段落应该是可见的。 textarea 空的时候开头应该只有 1 到 2 个行高。

Answer 1

您可以使用下面的脚本来实现。

$("#textarea").on("keyup", function(event){
    if($(event.currentTarget).outerHeight() < $(event.currentTarget)[0].scrollHeight){
    $(event.currentTarget).height($(event.currentTarget)[0].scrollHeight);
  }
});

我也创建了片段。

$("#textarea").on("keyup", function(event){
	if($(event.currentTarget).outerHeight() < $(event.currentTarget)[0].scrollHeight){
  	$(event.currentTarget).height($(event.currentTarget)[0].scrollHeight);
  }
})

#textarea{
  height:20px;
  overflow:hidden;
}

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

您也可以在这里进行测试.. https://jsfiddle.net/zrnp7gkm/8/