不能用 input type="text" 实现多行输入，因为它是单行语义控件，不解析换行符，css 无效，必须用 textarea；伪多行需用 textarea 伪装并替换换行符、禁用回车提交。
为什么不能用 input type="text" 实现多行输入
因为 input type="text" 是单行语义控件，浏览器根本不解析换行符（\n），即使 JS 赋值含回车的字符串，也会被忽略或显示为乱码。CSS 的 white-space、height、resize 等属性对它完全无效——这不是样式问题，是规范限制。
textarea 是唯一合规的多行文本控件
必须用 textarea 替代 input 才能真正支持换行、光标上下移动、回车提交新行等行为。常见误操作包括：
- 漏写
name属性 → 表单提交时该字段不携带数据 - 只设
rows不设cols或 CSS 宽高 → 在某些旧浏览器中渲染异常 - 误用
wrap="hard"且未配enctype="multipart/form-data"→ 换行符被转义为%0D%0A，后端收到的是 URL 编码而非原始 \n - 在移动端未加
autocapitalize="off" autocorrect="off"→ 英文输入时自动大写/纠错干扰用户
需要“伪多行”但又得保持 input 语义怎么办
极少数场景（如搜索框、标签输入）要求视觉上可换行但逻辑仍是单值提交，这时不能硬改 input，而应：
- 用
textarea+ CSS 伪装成单行：textarea{ resize: none; overflow: hidden; height: 1.5em; line-height: 1.5em; }，再监听input事件将换行符替换成空格或逗号 - 禁用回车默认行为：
event.key === 'Enter' && event.preventDefault()，避免意外提交 - 若需多值提交（如多个邮箱），改用
input type="email" multiple，由浏览器自动按逗号分隔并校验格式
移动端键盘适配和可访问性容易被忽略的点
很多开发者只关注桌面端表现，但移动端的输入体验差异极大：
-
textarea在 iOS 上默认触发全键盘，加inputmode="text"可强制调出基础文本键盘；数字场景用inputmode="decimal" - 缺少
label关联的textarea会导致 VoiceOver 等读屏器无法朗读提示文字，必须配id和for -
placeholder不是 label 替代品，它会在聚焦后消失，且无语义权重；必须额外写label - Android Chrome 对
maxlength的计算包含 Unicode 组合字符（如带音标的字母），实际截断位置可能比预期少 1–2 字
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
