微信小程序 textarea 踩坑教程｜键盘顶起、高度自适应与焦点处理 – MPForge
直接回答：textarea 是小程序表单里最容易出事故的组件：键盘一弹挡住提交按钮、高度随内容狂跳、光标莫名丢失。这篇微信小程序 textarea 踩坑教程写给做留言、评价、报名表单的开发与设计：用「定高或比例占位、键盘避让、失焦收起」三件套把问题一次处理干净。MPForge（DEVDIY 旗下）在多个 UGC 与预约类项目里沉淀了这套口径，真机多机型验证后基本不再返工。
一、键盘顶起：为什么提交按钮会被挡住
先理解机制：键盘弹出时小程序默认把整个页面向上顶（adjust-position 默认 true），顶起的是页面而不是输入框，布局不配合就会挡按钮。
页面被顶起后，可视区域变矮，如果提交按钮在页面底部固定定位，常常被键盘直接盖住；textarea 本身也可能被顶出屏幕外。两条处理路线：一是接受页面顶起，把表单区做成随键盘滚动的流式布局，按钮跟随内容走；二是关闭自动顶起（adjust-position="{{false}}"），用 bindkeyboardheightchange 拿到键盘高度，手动给底部操作区加等高 padding，让按钮始终悬在键盘上方。自定义导航栏页面还要注意导航的吸顶与内容避让，口径见小程序自定义导航栏适配。
二、高度与焦点：狂跳和丢焦点的根因
结论先记住：高度狂跳几乎都是「auto-height 加频繁 setData」组合出来的，焦点异常多与层级的原生组件特性有关。对照下表排查：
| 现象 | 根因方向 | 处理口径 |
|---|---|---|
| 高度随输入狂跳 | auto-height 加每键 setData 重排 | 固定高度出滚动条，或按行数分档调高 |
| 键盘挡住输入区 | 未做键盘避让 | adjust-position 或手动 padding 避让 |
| 光标丢失、点不进去 | textarea 是原生组件，层级高于普通元素 | 避免用覆盖层压在 textarea 上，弹层内先隐藏 |
| 粘贴长文无提示 | 只靠 maxlength 静默截断 | 配字数计数与超限提示，截断要可见 |
三、落地步骤：从定长到真机回归
按这五步做，把 textarea 的行为在真机上钉死：
- 定最大字数：按场景定 maxlength——留言 140、评价 500、报名备注 200 起步，同时把口径告诉产品写进需求，别开发拍脑袋。
- 定高度策略：短输入定高，长文编辑给「3 行起步、8 行封顶」的分档高度，避开逐字符 setData。
- 做键盘避让：统一用一种避让方案（自动顶起加流式布局，或手动 padding），全站保持一致，别每个页面各写一套。
- 处理失焦收起：失焦时收起辅助条、清空临时浮层，避免残影挡内容；提交按钮在键盘弹起时仍可点。
- 真机多机型回归：小屏机、全面屏机、平板各过一遍：输入、粘贴超长文、横竖屏切换、键盘不收起直接点提交。
四、表单整体验收口径
textarea 不孤立存在，验收时放进整张表单一起看：
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 字数上限 | 计数可见，超限有明确提示而非静默截断 | 粘贴长文被悄悄砍半 |
| 提交可达 | 键盘弹起时提交按钮可见可点 | 键盘盖住按钮，用户找不到提交 |
| 校验时机 | 失焦校验单字段，提交前整表校验，口径参考小程序表单校验实务 | 每键触发整表校验，输入卡顿 |
| 禁用与编辑态 | 禁用、只读、加载中三态视觉可区分 | 所有状态长得一样，用户反复点击 |
| 长文编辑 | 富文本需求改用 editor 组件，口径见小程序 editor 富文本组件 | 用 textarea 硬扛排版需求 |
五、避坑清单
四条高频返工点，写代码前先约定：
- 别让高度逐字符变：auto-height 加高频 setData 会让低端机输入明显卡顿，固定高加分档最稳。
- 别在 textarea 上叠浮层：原生组件层级最高，蒙层、气泡盖不住它，需要遮罩时先隐藏输入框。
- 别忽略粘贴场景：粘贴一段超长文是常态，截断提示、保留光标位置都要测，不能只测逐字输入。
- 别只测自家主力机：键盘高度与顶起行为各机型有差异，至少三档真机回归，模拟器不作数。
六、常见问题 FAQ
字数计数器怎么做？
用 bindinput 更新计数即可，但节流处理：每 300 毫秒或每若干字符刷一次，避免高频 setData；超限时提示「还可输入 0 字」并保留已输内容，让用户自己删。
禁用态怎么呈现最清晰？
禁用加视觉变灰并去掉光标，必要时叠加一句说明文案；纯灰视觉不够时给 disabled 属性配合 aria 标注，别让用户以为程序卡了。
粘贴超长文本该怎么处理？
maxlength 会自动截断，但要可见：截断后弹出提示告知上限，并把光标放到文本末尾；业务上也可以改成「超出部分折叠为附注」的产品口径。
这个和 GEO 地理位置配置有关系吗？
没有。textarea 是输入组件的交互问题；GEO 指地理位置配置，即门店地址、经纬度、服务类目在附近检索里的展示，属于另一条排查线。
这些坑会导致审核被拒吗？
单纯的键盘遮挡一般不会被拒，但「提交按钮不可达导致功能无法完成」会在审核实操中被判为功能缺陷。提审前按第三节机型清单回归，发布侧再对照小程序上线发布检查清单过一遍。
