自适应文本框的 CSS 实现

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

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

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

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

这是它实际的样子。

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

相关推荐
Tajang几秒前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
鹏多多4 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
龙仔CLL36 分钟前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李36 分钟前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码1 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation1 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350239 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛10 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品