可调整大小的文本区域达到一定大小

Question

我正在Angular4/Bootstrap3中创建要在IE11上运行的文本区域字段。

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

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

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

我试图实现的目标与默认行为几乎没有什么不同。我希望文本区域可以调整大小，但大小不应超过一定数量的行数。假设最大大小设置为 5 行。 因此，如果要显示的文本可以适合 1 行，则文本区域仅显示 1 行。如果可以装在 4 行中，它会扩展到 4 行。如果可以将其放入 10 行中，则最多扩展为 5 行，并显示剩余文本的滚动条。

这种行为可能吗？我以行为例，但如果可以通过高度属性或其他方式实现，我也很好。

Answer 1

您可以使用一点 CSS 并使用max-height属性来实现这一点：

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

通过不设置默认高度，文本区域将足够高，用于任何小于您的max-height的内容，当它到达它时，它将开始滚动。

此外，请从textarea中删除rows属性。