自适应文本框的 CSS 实现

独立开发者张张2023-11-26 16:58

当需要接受来自用户的大量文本时，Textareas 域非常有用。但是，Textareas 的问题是它们具有固定的高度。因此，如果用户输入的文本多于文本的高度，文本就会溢出，用户将不得不滚动才能看到文本的其余部分。

您可以使用 rows 属性增加文本区域的高度。但是，这不是一个好的解决方案，因为您不知道用户将输入多少文本。因此，您不能将 rows 属性设置为固定值。

值得庆幸的是，带有 form-sizing 属性的实验性 CSS 规则即将推出，它可以让您根据用户输入的文本量自动增加 Textareas 的高度。

css 复制代码

textarea {
    form-sizing: normal;
}

这是它实际的样子。

form-sizing 属性是一项新的 CSS 规则，即将在 Chrome Canary 中首次推出。