禁用 拖拽缩放需使用 resize: none;，必须作用于元素本身或明确选择器，避免被框架样式覆盖；其他值如 vertical 仅禁用水平方向，仍可拖拽破坏布局。
怎么禁用 <textarea></textarea> 的拖拽缩放
默认所有浏览器都允许用户用鼠标拖拽 <textarea></textarea> 右下角调整大小，这在表单布局里经常导致错位或响应式失效。禁用它只需一行 CSS：resize: none;。
常见错误是只写在 class 里却忘了加 !important（尤其被 Bootstrap 或框架样式覆盖时），或者只写了 resize: vertical; 却误以为“没水平方向就等于禁用”——其实垂直方向仍可拖，依然会破坏布局。
-
resize: none;真正禁用全部方向缩放 - 必须作用于
<textarea></textarea>元素本身，或带明确选择器的规则（如textarea.form-input） - 若用内联样式，写成
style="resize: none;"即可，无需!important - Firefox 和旧版 Safari 对
resize支持稳定，不用额外前缀
resize 属性还能怎么用
除了 none，resize 还支持 both、horizontal、vertical，但要注意：这些值只对 overflow 为 auto 或 scroll 的块级元素生效，而 <textarea></textarea> 默认就是 overflow: auto，所以能直接用。
实际中很少需要开启水平缩放——<textarea></textarea> 水平拉宽后，换行逻辑不变，文字会撑出横向滚动条，体验反而更差。垂直缩放倒是有场景，比如日志查看器里让用户拉高看更多行。
立即学习“前端免费学习笔记（深入）”；
-
resize: vertical;允许上下拖，不改变宽度，最常用 -
resize: horizontal;不推荐，易引发文本溢出和滚动条打架 -
resize: both;等价于默认行为，没必要显式写 - Chrome 和 Edge 在
min-width/max-width限制下仍允许拖到边界，但不会突破
为什么加了 resize: none 还能拖
最常见原因是 CSS 优先级不够，被更高权重的规则覆盖，比如框架的 textarea { resize: vertical; } 写在你后面，或者用了 !important 的第三方样式。
另一个隐蔽问题是：某些 UI 库（如 Ant Design、Element Plus）会给 <textarea></textarea> 包一层 <div>，然后把样式写在父容器上，结果你写的 <code>resize 根本没命中目标元素。
- 用浏览器开发者工具检查真实渲染的
<textarea></textarea>元素，看 computed 样式里resize是否为none - 如果父容器有
overflow: hidden，可能遮住右下角控件，让人误以为“不能拖”，其实只是看不见手柄 - 移动端 Safari 不显示 resize 手柄，但部分 iOS 版本仍可通过长按+拖动触发缩放（属系统级行为，CSS 无法禁用）
要不要用 JavaScript 监听 resize 事件
别费劲——<textarea></textarea> 的拖拽缩放不会触发 resize 事件，那个事件只针对 window。想响应尺寸变化，得靠 input 或 change 事件监听内容变化，再用 scrollHeight + clientHeight 推算是否需要自适应高度。
真要监听拖拽结束，目前没标准 API；强行轮询 offsetWidth/offsetHeight 开销大且不准，也不可靠。
- 浏览器原生 resize 拖拽没有对应 DOM 事件
-
window.addEventListener('resize', ...)和<textarea></textarea>无关 - 自适应高度方案建议用
textarea.addEventListener('input', () => { ... })+ 高度重置逻辑 - 如果用了
contenteditable替代<textarea></textarea>，那更没法用resize属性了
