自适应文本框的 CSS 实现

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

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

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

css 复制代码
textarea {
    form-sizing: normal;
}

这是它实际的样子。

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

相关推荐
用户380225859824几秒前
vue3源码解析:依赖收集
前端·vue.js
WaiterL几秒前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason3 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7784 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽23 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟23 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦23 分钟前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子24 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
欢乐时光c28 分钟前
常见请求头响应头的含义
前端·面试
wzyoung29 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js