移动端输入框比看起来难
游戏客户端里的输入框并不少:角色名、公会公告、聊天、兑换码、搜索、好友备注、反馈表单。PC 上一个输入框很普通,移动端却会遇到软键盘遮挡、输入法组合态、emoji、复制粘贴、敏感词、字数统计、横竖屏切换、安卓返回键和 iOS 安全区。
如果输入框只按 UI 控件处理,很容易出现玩家打字到一半被关闭、光标错位、中文拼音还没确认就被截断、键盘把发送按钮顶出屏幕。输入体验虽然不是核心战斗,但它影响社交、付费兑换和账号安全,不能粗糙。
flowchart TD
A[输入框获得焦点] --> B[请求软键盘]
B --> C[监听键盘高度/安全区]
C --> D[调整面板布局]
D --> E[处理组合输入]
E --> F{提交?}
F -->|否| E
F -->|是| G[本地校验]
G --> H[服务端校验]
H --> I[提交成功/失败并恢复焦点策略]
软键盘会改变整个布局
移动端键盘弹出后,可用视口高度变化。聊天输入栏要跟随键盘上移,兑换码弹窗要保持按钮可见,公会公告编辑器要避免文本区域只剩一行。不同系统和机型对键盘高度回调不一致,客户端不能只依赖一次事件。
一个稳妥方案是把输入面板放在“键盘适配层”下。适配层监听键盘显示、隐藏、高度变化和安全区,输出当前可用区域。业务输入框不直接处理机型差异,只根据可用区域重新布局。
横竖屏切换更复杂。键盘打开时旋转设备,很多平台会先隐藏再重新显示键盘。客户端要防止输入内容丢失,焦点状态也要合理恢复。玩家在公告里写了半段文字,旋转后清空是很糟糕的体验。
中文输入法有组合态
中文、日文、韩文输入常有组合态。玩家输入拼音时,文本看起来已经在输入框里,但还没有最终确认。如果此时客户端按长度限制强行截断,可能会破坏输入法状态。正确做法是区分 composing text 和 committed text。
长度统计也要和服务端一致。角色名可能限制 12 个字符,但 emoji、组合字、全角符号怎么计数?客户端最好使用和服务端约定的规则:按 Unicode 标量、按字节、按显示宽度,必须明确。否则玩家本地看没超,提交却失败。
敏感词检查也不应在组合态里频繁打断。可以在提交时做本地预检查,服务端最终校验。聊天场景如果需要实时过滤,也要避免在玩家拼音未确认时替换文字。
提交按钮和返回键要一致
键盘上的完成、发送、搜索按钮应该和界面按钮行为一致。聊天输入按发送就是发送,搜索输入按搜索就是搜索,公告编辑按完成可能只是收起键盘而不是提交。不同输入场景要设置合适的键盘动作。
安卓返回键常用于收起键盘。如果键盘已打开,第一次返回应收键盘;键盘关闭后,第二次返回才关闭弹窗或页面。这个规则要和游戏整体返回栈配合,否则玩家会误退出编辑。
提交失败后是否保持焦点,要看场景。兑换码失败可以保持输入框,方便修改;角色名成功后应关闭输入;公告敏感词失败应保持焦点并选中问题区域或给出提示。不要所有失败都关闭键盘。
复制粘贴和安全
兑换码、好友 ID、客服单号需要复制粘贴。客户端要支持粘贴,但也要清理不可见字符、换行和多余空格。很多兑换码失败其实是玩家复制了空格或换行。输入框可以在粘贴时自动 trim,并提示已移除空格。
聊天和公告则不能随意清理所有字符,因为玩家可能有意输入换行或标点。不同场景要有不同文本策略。密码或账号相关输入还要考虑系统自动填充和安全键盘策略。
剪贴板读取也要注意隐私。不要在页面打开时主动读取剪贴板,除非平台和产品明确允许。更好的方式是玩家点击粘贴按钮时再读取,并在失败时提示手动输入。
输入框要能处理遮挡和滚动
长文本编辑器需要光标可见。玩家输入到多行公告底部时,文本区域应自动滚动到光标附近。键盘弹出后,弹窗整体上移不够,还要保证光标行没有被键盘、工具栏或候选词栏遮住。
聊天列表也要处理锚点。键盘弹出时,聊天列表高度变小,最新消息和输入框的关系要稳定。玩家正在翻历史消息时,不应因为键盘变化强行跳到底部;玩家在底部时,新消息才自动跟随。
校验文案要具体
“输入不合法”是最没用的提示。角色名应该说明长度、字符范围、敏感词或重复;兑换码应该区分不存在、已使用、已过期、区服不符;公会公告应该说明超长或含不可用内容。客户端可以先做可解释的本地校验,服务端返回再覆盖。
字数统计最好实时显示,但不要用刺眼方式打扰。接近上限时提示即可。超出上限时可以阻止继续输入,也可以允许输入但禁用提交,取决于场景。长文本更适合允许编辑后提示,短名称更适合硬限制。
小结
移动端输入框是平台适配、文本处理和业务规则的交汇点。客户端把键盘适配层、组合输入、长度规则、提交策略、粘贴清理和焦点恢复做好,玩家才会觉得社交和编辑自然可靠。一个不起眼的输入框,背后其实是一套细致的体验工程。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
我会为输入框准备一份机型测试表,至少覆盖 iOS、安卓主流输入法、横竖屏、刘海屏、分屏、小窗和外接键盘。每个输入场景都录制焦点、键盘高度、按钮位置和提交结果,很多平台差异只有这样才能提前暴露。
继续阅读
探索更多技术文章
浏览归档,发现更多关于系统设计、工具链和工程实践的内容。