怎样用 <textarea></textarea> 替代 <input type="text">
文本域不是“设置出来的”，而是用 <textarea></textarea> 标签直接写的。很多人卡在第一步：误以为给 <input> 加个属性就能变多行——不行，type="text" 永远单行，type="textarea" 不存在。
常见错误现象：input 设置了 rows 或 cols 属性但没效果；加了 wrap="soft" 也没用；CSS 强行设 height 和 white-space 后换行显示异常。
-
<textarea></textarea>是独立标签，必须成对出现（<textarea>...</textarea>），内容写在标签中间 - 默认可换行、可滚动、支持回车提交（除非
form阻止默认行为） - 不要用
value属性赋值，用标签内文本或 JS 的.value属性操作 - 若需预填充，写成
<textarea>默认文字</textarea>，不是<textarea value="默认文字"></textarea>
placeholder 和 required 在 <textarea></textarea> 里能用吗
能，但行为和 <input> 略有差异：占位符文字不会影响表单验证逻辑，required 只检查是否为空字符串（不含空白符），这点容易被忽略。
使用场景：用户需输入一段说明、反馈、日志等非结构化文本，且不能为空。
立即学习“前端免费学习笔记（深入）”；
-
placeholder不是 label，不能替代语义化<label for="xxx"></label>，屏幕阅读器可能跳过它 -
required触发校验时，只认.value.trim() === ""，所以填了空格或换行也会通过校验 - 若要严格禁止“纯空白”，得用 JS 监听
submit事件手动判断textarea.value.trim() - 移动端 iOS Safari 对
placeholder的垂直居中支持不稳定，建议用 CSS 微调line-height或padding
怎么控制 <textarea></textarea> 的大小和缩放行为
浏览器默认允许拖拽右下角缩放，但多数产品需要禁用或限制尺寸，否则布局易崩。
性能 / 兼容性影响：CSS 的 resize 和 max-height 在旧版 Android WebView 中兼容性差；用 rows 属性比纯 CSS 更稳定，但它是“可见行数”而非精确像素。
- 禁用缩放：
style="resize: none;"，或写进 class 里统一控制 - 固定高度 + 滚动条：
style="height: 120px; overflow-y: auto;"，比rows="4"更可控 - 响应式适配：避免只设
rows，配合min-height和max-height防止内容撑爆容器 - 注意：Chrome 下
overflow: hidden会隐藏滚动条但不阻止滚动，用户仍可用滚轮，应设overflow: visible或明确禁用
为什么 JS 获取 <textarea></textarea> 值总是空的
最常见原因是把内容写在 value 属性里，而不是标签体内。HTML 解析时，<textarea value="xxx"></textarea> 的 value 属性会被忽略，初始值始终为空字符串。
另一个坑是用 innerHTML 或 textContent 读取——它们返回的是原始 HTML 或带换行符的字符串，而真实表单提交/验证依赖的是 .value 属性。
- 正确初始化：
<textarea id="desc">这里是初始内容</textarea> - JS 读取一律用
document.getElementById('desc').value - JS 赋值也用
.value = "新内容"，不要用.innerHTML = "..." - 监听输入推荐用
input事件（不是change），后者只在失焦时触发，无法实时捕获粘贴或 IME 输入
多行文本的换行符在不同系统里可能是 \n、\r\n，后端接收前最好统一 normalize，别假设前端传来的一定是 LF。
