textarea字数限制与resize设置全解析

• 必须显式设置 overflow: auto、hidden 或 scroll —— visible 下手柄压根不渲染
• 块级元素才支持：display: block 或 inline-block；inline 元素加了也无效
• Safari 要求有明确尺寸约束（比如写了 width 和 height），否则手柄可能闪一下就消失
• 移动端 Safari 不显示手柄（iOS 系统级行为），但部分版本仍可通过长按+拖动触发缩放，CSS 无法禁用

resize: none 才是真禁用，vertical 不等于“安全”

很多项目里写 resize: vertical 是为了“只允许拉高”，结果发现表单错位了 —— 因为用户照样能拖，只是方向受限而已。

• 真正禁用拖拽，只有一条路：resize: none
• 必须作用于 textarea 本身，不能只写在父容器上；框架样式（如 Bootstrap）常带 resize: vertical，得用更高优先级覆盖
• 内联样式最稳：，不用 !important
• resize: vertical 在日志查看器、评论框等场景合理，但表单内慎用 —— 拉高后可能撑破 flex 容器或破坏响应式断点

想让 textarea 自适应高度？resize 不负责这事

resize 只提供手动拖拽入口，不监听内容变化，也不触发任何事件。所谓“自适应”，得靠 JS 或 CSS 技巧实现。

• textarea 的 onresize 事件不存在 —— 那是 window 的专属事件
• 常见做法：监听 input 事件，用 scrollHeight 对比 clientHeight 判断是否需要撑高
• CSS 方案有限：height: auto 无效，min-height + max-height + overflow: auto 是更可控的折中
• 别依赖 rows 属性做高度控制 —— 它只是初始行数建议值，用户拖完就失效

最容易被忽略的一点：哪怕你设了 resize: both 和 max-width/max-height，Safari 16.4 之前仍可能无视最大限制，只认最小值。真要强约束，还得加 JS 校验拖拽后的最终尺寸。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《textarea字数限制与resize设置全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。