html - 可调整大小的 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 的任何内容，并且当它到达它时，它将开始滚动。

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