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

• 必须显式设置overflow：需手动添加overflow: auto、hidden或scroll之一。若overflow保持默认的visible，拖拽手柄不会渲染出来。
• 仅块级元素支持：元素需为display: block或inline-block。inline元素（如）即使设置resize也无效。
• Safari的“小脾气”：在某些旧版本Safari中，若元素没有明确的尺寸约束（如未设置width和height），拖拽手柄可能会出现一下又消失，体验较为诡异。
• 移动端特殊处理：在iOS Safari上，为符合系统设计规范，可视拖拽手柄默认不显示。但用户通过长按并拖动元素边缘，仍可能触发缩放，此为系统级行为，CSS无法彻底禁用。

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

另一个常见误区在于“禁用”拖拽。很多项目中，开发者写resize: vertical的本意是“只允许用户纵向拉高，防止横向拖拽破坏布局”。想法固然好，但结果往往是表单依然错位——用户仍可拖拽，只是不能往两侧拉伸，上下拉动同样会改变高度、破坏布局。

因此，要彻底禁止用户拖拽改变大小，唯一途径是：resize: none。

• 找准作用对象：该样式必须直接作用于textarea元素本身，仅写在父容器上无效。
• 注意框架样式覆盖：像Bootstrap这类UI框架，有时会默认给textarea加上resize: vertical。此时需要使用更高优先级的CSS选择器覆盖它。
• 最稳妥写法：若追求绝对可靠，直接写内联样式，优先级最高，连!important都无需使用。
• 合理使用场景：resize: vertical并非一无是处。在日志查看器、代码编辑器或大型评论框等需要用户手动调整阅读区域的场景下，它依然合理。但在严谨的表单布局中（尤其使用了Flexbox或Grid，且设定了响应式断点时），需谨慎使用，因为用户拖出的高度可能撑破容器，破坏整体设计。

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

聊到高度，又引出一个常见误解：能否用resize实现textarea的“自适应高度”（即内容增多时自动变高）？答案是不能。resize仅提供手动拖拽的“入口”，不监听内容变化，也不会因内容变化自动触发任何尺寸调整。

要实现随输入内容自动撑高，需另寻他法：

• 没有onresize事件：首先，textarea元素没有onresize事件，那是window对象的专属事件。
• Ja vaScript方案是主流：常见做法是监听textarea的input事件，在事件处理函数中对比元素的scrollHeight（整个内容高度）和clientHeight（可视区域高度），判断是否需要增加textarea的height值。
• CSS方案局限性：纯CSS方案较为有限。直接设置height: auto对textarea无效。一个折中办法是结合min-height、max-height和overflow: auto，使其在一定范围内“自适应”，超过最大高度则出现滚动条，可控性更强。
• 别依赖rows属性：rows属性仅为浏览器提供初始行数建议值，一旦用户手动拖拽，该设定即失效，不要用它做高度控制。

最后提一个非常隐蔽的浏览器兼容性问题：即便同时设置了resize: both和max-width/max-height，在Safari 16.4之前的版本中，浏览器可能完全忽略设置的最大尺寸限制，只尊重最小尺寸。这意味着用户可以将元素拖得非常大。如果产品设计对尺寸有严格约束要求，仅靠CSS可能不够，还需用Ja vaScript校验拖拽结束后的最终尺寸并进行强制修正。