订单备注输入框应根据内容长度选择：简短说明用<input type="text">，多行备注必须用<textarea>；后者支持换行、滚动和语义正确，配合rows、maxlength及white-space: pre-line确保体验与数据一致。
订单备注输入框该用 <textarea> 还是 <input type="text">
单行简短说明（比如“请放门口”）用 <input type="text">；多行、带换行、可能超 50 字的订单备注，必须用 <textarea>。用 <input> 强行撑高或加 rows 属性无效——它根本不支持多行渲染，回车也不会换行，用户输入体验直接崩坏。
常见错误：把 <input> 加 style="height: 100px;" 当作多行框，结果用户按 Enter 没反应，内容全挤在一行里，后端收到的也是无换行符的字符串。
-
<textarea>默认可换行、可滚动、语义正确，表单提交时自动保留\n - 设
rows="3"控制默认可见行数，比纯 CSS 高度更可靠（尤其在缩放或不同字体下） - 务必加
name属性（如name="order_remark"），否则后端收不到值
怎么限制备注长度又不卡用户输入
前端用 maxlength 最直接，但别只靠它——它会粗暴截断，用户打到第 100 个字时突然输不进去，毫无提示。更友好的做法是：maxlength 保底 + 实时字数提示 + 输入前判断是否超限。
注意：中文、英文、emoji 计数要一致。HTML 的 maxlength 按 UTF-16 码元计（一个 emoji 可能占 2 个码元），而多数后端按字符数或字节数校验。为防错位，前后端约定统一按「Unicode 字符数」校验（JavaScript 用 [...value].length）。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
<textarea maxlength="200" oninput="updateCounter(this)"></textarea> -
oninput比onkeyup更准，能捕获粘贴、剪切板输入和 IME 上屏 - 避免用
onblur截断——用户离开时才发现被删了 20 个字，体验极差
移动端键盘弹起后备注框被遮挡怎么办
iOS Safari 和部分安卓 WebView 中，<textarea> 聚焦时软键盘顶起页面，常导致输入框滑出视口，用户看不见自己打的字。这不是 bug，是浏览器默认行为，但可以缓解。
关键不是强行滚动，而是让输入框始终“可读”。优先用原生能力：scrollIntoView({ behavior: 'smooth', block: 'nearest' }) 在 focus 后触发；若失效，再加轻量级监听 resize（键盘弹起会触发 viewport resize）。
- 不要用
position: fixed把输入框钉死——会破坏页面流，影响滚动和焦点管理 - 避免设
height固定值，用min-height+max-height更安全 - 测试真机：模拟器里的键盘行为和真实触摸反馈差异很大
后端收到的备注换行符为什么显示成空格
浏览器提交时，<textarea> 的换行会编码为 \r\n（Windows 风格）或 \n（Unix/macOS）。但若后端没做处理，直接插入数据库或渲染到 HTML，\n 在 HTML 中不换行——它会被浏览器当空白符合并。
解决分两步：存的时候保留原始换行符（别用 trim() 或正则误删）；读出来渲染时，用 white-space: pre-line CSS 或服务端转 \n → <br>。别在前端 JS 里提前把 \n 替换成 <br> 再发请求——这会让后端拿到含 HTML 标签的脏数据，后续导出 CSV 或发短信就炸了。
- CSS 方案最干净：
div.remark { white-space: pre-line; }，兼容所有换行风格 - 服务端替换要谨慎：PHP 用
nl2br()，Python 用.replace('\n', '<br>')，但得先统一换行符（.replace(/\r\n|\r/g, '\n')） - 数据库字段类型选
TEXT，别用VARCHAR(255)——备注很容易超长
备注看着小，但涉及输入体验、数据一致性、跨端渲染三个层面。最容易被忽略的是：前端显示的换行 ≠ 后端存储的换行 ≠ 数据库字段容量设计。三者没对齐，上线后就会出现“用户明明打了 5 行，订单页只显示 1 行”这种问题。
