禁用textarea拉伸必须用resize: none；maxlength仅拦截键盘输入，需js监听input事件截断并恢复光标；固定尺寸应使用css宽高+min/max限制；服务端必须校验字符数且字段长度不小于前端限制。
textarea 禁用拉伸必须用 resize: none
直接加 resize: none 是唯一可靠方式，其他写法（比如只设 resize: vertical）看似限制了方向，实际仍允许用户拖高破坏布局。常见错误是样式被框架覆盖——比如 Bootstrap 默认设了 textarea { resize: vertical }，你写的规则没加 !important 或选择器不够具体，就无效。
务必检查浏览器开发者工具的 “Computed” 面板，确认最终生效的 resize 值确实是 none。内联样式 style="resize: none;" 最不容易被覆盖，适合快速验证。
移动端 Safari 不显示拖拽手柄，但部分 iOS 版本仍可通过长按+拖动触发缩放，这种行为 CSS 无法拦截，只能靠 UX 提示规避。
maxlength 在 textarea 上有效但有硬伤
maxlength 属性在现代浏览器（Chrome/Firefox/Safari/Edge 10+）中对 textarea 生效，但它只拦截键盘输入，不阻止粘贴。用户 Ctrl+V 一段超长文本，会完整插入，然后立即触发 input 事件——此时 el.value.length > el.maxLength 已为真。
需要 JS 补位校验：
- 监听
input事件，而非change（后者不覆盖粘贴场景） - 检测超长后用
el.value = el.value.slice(0, el.maxLength)截断 - 注意：直接赋值会重置光标位置；如需保留，得配合
setSelectionRange手动恢复
另外，maxlength 统计的是 Unicode 字符数（含换行符 \n），不是字节数，中文、emoji 都算 1 个字符。
固定尺寸不能只靠 rows 和 cols
rows 和 cols 是 HTML 属性，但渲染效果在 IE、Firefox、Chrome 中差异明显：同样 rows="5"，字体、行高、padding 不同会导致实际高度浮动，且无法禁用拉伸。
真正可控的方式是纯 CSS：
- 用
width/height设定基准尺寸 - 必须同时加
min-width/max-width和min-height/max-height，否则 Chrome 可能突破限制 - 搭配
overflow-y: auto，让内容超长时出现滚动条，而不是撑开容器
别依赖 cols 控制宽度——它按等宽字符数计算，字体一变就失准。
服务端必须校验 maxlength 边界
HTML 的 maxlength 和前端 JS 截断都只是用户体验层防护，提交时完全可能绕过：禁用 JS、手动改 DOM、抓包重发……任何长度校验都必须在服务端重复执行。
尤其注意：
- 数据库字段长度限制（如 MySQL
VARCHAR(200)）要 ≥ 前端设定的maxlength - 服务端校验应基于真实字符数（UTF-8 字符串长度），而非字节长度
- 若业务要求“最多 50 个汉字”，则需额外判断 Unicode 类别（如
\p{Han}），不能只看length
最易被忽略的点：前端截断后光标位置错乱 + 服务端漏校验，这两处出问题，数据就不可逆地越界了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
