HTML中textarea字数限制与HTML中textarea标签resize属性设置详解

textarea不能用resize限制字数，它仅控制拖拽行为；字数限制必须用maxlength属性或JavaScript监听，两者功能完全独立。

textarea 不能靠 resize 限制字数，它只管拖拽大小；字数限制必须用 maxlength 属性或 JavaScript 监听 —— 两者作用完全不重叠，混用也不会互相影响。

textarea 字数限制只能用 maxlength，别试 resize

很多人看到 resize 能控制尺寸，就误以为也能“限制输入长度”，这是根本性误解。resize 是纯视觉交互属性，只影响右下角那个拖动手柄的行为，和内容无关。

• maxlength 是 HTML 原生属性，写在标签里就行：<textarea maxlength="200"></textarea>
• 它会硬性截断输入（包括粘贴），且所有现代浏览器都支持，无需 JS 补充
• 注意：maxlength 计的是 Unicode 码点数，不是字节数。中文、emoji、英文字符都算 1
• 服务端必须二次校验 —— maxlength 可被绕过（如禁用 JS 后手动删掉属性）

resize 必须配 overflow 才生效，textarea 默认满足但其他元素不默认

textarea 默认 overflow: auto，所以直接写 resize: vertical 就能用；但换成 <div contenteditable> 或普通 <section>，就会失效。

• 必须显式设置 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，得用更高优先级覆盖
• 内联样式最稳：<textarea style="resize: none;"></textarea>，不用 !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 校验拖拽后的最终尺寸。