可调整大小的TextArea达到一定的大小

Question

我在Angular4 / Bootstrap3中创建一个文本区域字段，以便在IE11上运行。

文本区域将预先填充一些文字

<textarea [value]="mydata" class="form-control" rows="5"></textarea>

这可以按照人们期望的方式工作。显示5行，如果文本超出可以装入5行的内容，则会显示滚动条。如果文本小于空，则在文本区域中显示空格。

我想要实现的与默认行为略有不同。我希望textarea可以调整大小，但大小不应超过一定数量的行。可以说最大大小设置为5行。 因此，如果要显示的文本可以在1行中拟合，则文本区域仅显示1行。如果它可以安装在4行，它会扩展到4行。如果它可以安装在10行中，那么它最多可以扩展到5行，并显示剩余文本的滚动条。

这种行为可能吗？我已经使用了行作为示例，但是如果可以使用height属性或其他东西来实现，我也可以使用它。

Answer 1

您可以使用一点CSS实现此目的，并使用max-height属性：

textarea {
    overflow-y:scroll
    max-height:100px; /* change to a height you see fit */
}

如果不设置默认高度，文本区域将足够高，以适应任何低于max-height的内容，当它达到它时，它将开始滚动。

另外，从rows删除textarea属性。