textarea 必须设置 name 属性才能提交数据，否则浏览器忽略该字段；换行符易丢失，需前后端协同处理；移动端聚焦需用户手势触发；优先用 css 控制尺寸，避免 rows/cols 冲突。
textarea 必须有 name 属性才能提交数据
表单提交时，textarea 的内容不会被发送到后端，除非它有 name 属性。没有 name，浏览器会直接忽略该字段——这和 input 一样，但新手常以为只要写了 id 或 class 就够了。
实操建议：
- 始终为
textarea设置有意义的name，比如name="message"或name="feedback" - 避免用纯数字或空格命名，如
name="1"或name="user message"（空格会导致解析失败） - 如果用 PHP 接收，
$_POST['message']才能取到值；Node.js 的body-parser也依赖这个name
换行符在前后端处理中容易丢失或错乱
用户按 Enter 输入的换行，在 HTML 中显示正常，但提交后可能变成空格、被过滤，或在数据库里存成 \r\n 却渲染成一行。根本原因是：HTML 表单默认把换行传为 \r\n，而 CSS 的 white-space 和后端字符串处理方式不一致。
实操建议：
- 前端展示时，用
white-space: pre-line保证换行可见（不是pre，否则会保留多余空格） - 后端接收后，别直接用
.trim()或正则粗暴替换\r——保留\n更通用 - 存入数据库前，确认字段类型支持长文本（如 MySQL 用
TEXT，不是VARCHAR(255)）
移动端 textarea 自动聚焦和滚动异常很常见
在 iOS Safari 或部分安卓 WebView 中，给 textarea 调用 .focus() 可能不弹出键盘，或弹出后页面没滚动到可视区，用户看不到输入框。这不是 bug，是系统对“非用户手势触发”的限制。
实操建议：
- 只在用户真实点击/触摸后调用
focus()，比如绑定在按钮的onclick里，而不是页面加载完就执行 - 需要自动聚焦时，加个微小延迟：
setTimeout(() => el.focus(), 100)，绕过某些 UA 的拦截逻辑 - 配合
el.scrollIntoView({ behavior: 'smooth' })确保输入框可见，但注意旧版 Android 不支持behavior参数
textarea 的 rows/cols 和 CSS width/height 冲突导致布局错乱
rows 和 cols 是 HTML 属性，定义的是“可见行数”和“平均字符宽度”，它们和 CSS 的 height、width 会打架。尤其当设了 resize: both 后，用户拖拽改变尺寸，rows 就完全失效。
实操建议：
- 优先用 CSS 控制尺寸：
width: 100%、min-height: 120px，并设box-sizing: border-box - 删掉
rows和cols，或只留rows="3"作为最低行数提示（不参与实际布局） - 如果要限制最大高度，用
max-height+overflow-y: auto，别依赖rows截断
最常被忽略的一点：textarea 默认允许用户粘贴富文本（比如从 Word 复制带样式的段落），但提交的只是纯文本内容——样式全丢。如果业务真需要保留简单格式，得换 contenteditable 或引入轻量编辑器，而不是硬改 textarea。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
