问题起源

距离下班只剩十分钟，测试同学拿着 iPhone 过来说使用者登录页有点不对劲。使用者名框看着像拿到了焦点，键盘却没跟上；说起来，切到密码框后使用者名框又自己亮了。下班计划先放一边，得把这个只在小程序 iOS 环境稳定复现的问题弄明白。

登录页里有 NameInput 和 PasswordInput 两个输入框。

• 点击输入框后焦点边框不能及时生效；
• 快速切换使用者名和密码输入框时旧输入框可能在延迟的 focus 事件到达后重新展示焦点态；
• 清除输入、切换密码可见性等附属操作可能触发输入框焦点状态异常；
• 依赖原生 blur/focus 事件的表单校验与视觉状态不稳定。

根因落在小程序原生事件的时序，还有它和 React 状态更新之间的配合。老实说，

登录组件技术栈

问题发生在一套 Taro 小程序组件库里。页面用 React 函数组件和 Hooks 写，TypeScript 负责把输入框、表单项和回调之间的约束写清楚。

Taro 的角色是让 React 组件能跑在小程序里同时把原生输入框的事件时序带进了组件树。浏览器里习惯的 focus/blur 顺序，在真机上不能照单全收。老实说，

iOS 到底出了什么事

Web 表单里焦点切换大多按下面顺序发生：

flowchart LR
A --> B
B --> C
D --> E
E --> F
F --> G

但小程序 iOS 的事件有时会晚到。顺序也可能乱掉：

sequenceDiagram
participant U as 使用者
participant C as 密码输入框
participant P as 使用者名输入框
U->C这方面，点击密码输入框
C->C这方面，开始获得焦点
P-->P的观点是，延迟的旧 focus 事件到达
至于P->P，错误恢复焦点样式

原生  到达时并不代表此刻该光标应亮着。

使用者痛点汇总：

• "我的账号字段闪烁光标，却没弹出键盘"
• "切到密码后我之前已经写好的文字被自动删除"
• "清除按钮被点击时键盘突然收起"
• "表单校验提示总是错位出现"
• "我想随手更改可见性。却导致前一个字段失去光标"
• "页面看起来没有响应，但内部状态已混乱"
• "频繁来回操作导致体验极差"
• "UI 与实际交互脱节，让人怀疑是否是代码bug还是环境问题"
• "无法在真机上稳定复现，只能在模拟器测试"

这是 Taro 的顽疾，还是小程序的顽疾？其实，

Taro 没有凭空制造这个问题。它只是把微信小程序 iOS 原生 Input 的事件包装成 React 组件。早些年的微信开放社区已描述一样现象：iOS 上键盘弹出后 focus 回调可能要等键盘动画结束才到位！若此期间做了别操作，则 blur 会先于 focus 到达。从而出现“倒置”效果，

Taro 在某个版本补过 “alwaysEmbed” 属性。用来解决聚焦时层级显示问题，但这与这篇文章讨论的是事件乱序并无直接关系。是：把focus 当作“使用者刚刚点击”的唯一信号并不可靠。

解决思路的观点是，给每个 Input 加一张准入证

• - 使用者点击立即反馈视觉焦点；- 同一表单只能有一个 Input 展示焦点；- 延迟到达旧 focus 不得抢回；- 不伪造原生 blur；- 附属操作不会错误激活；- 保持现有 iOS 兼容逻辑，不用定时猜测。

主要实现思路概览：

1. **激活资格** — 用 Ref 保存是否可以接收新的 focus。如果当前不是激活状态，则忽略延迟来的 focus。当新的 Input 被激活时通过全局 eventCenter 广播。将其它 Input 的 activeRef 重置为 false，并移除其视觉聚焦状态。
2. **视觉聚焦** — 用 State 保存是否展示边框。只有当 activeRef 为 true 时才允许设置 isFocus = true，否则直接返回 false。
3. **同步策略** — - 在 View 的 touchstart 或者 click 时先调用 activateInput 再执行本地 focus 操作；- 原生 onFocus 到达后 确认一次 visual 聚焦；话说回来，- 原生 onBlur 单纯关闭 isFocus。而不是立即丢弃 activeRef，以避免因乱序导致误判失活。
4. **解除竞争** — - 每个 Input 拥有唯一 ID，通过 eventCenter 广播 deactivate 输入 id；- 当收到其它 Input 激活广播且 id 不匹配时将 own activeRef=false 并 setIsFocus。
5. `onDeactivate` 回调专门用于告知业务层此 Input 已被替代。可执行表单校验或其他逻辑，而不是冒充 native blur 对象。.
   A) 使用者点击使用者名 -> activateUsername -> setIsFocus B) 点击密码 -> activatePassword -> broadcast deactivateUsername → username setIsFocus C) username 收到旧 delayed focus → activeRef false → ignore.

`useInputFocus` 完整代码：

# 边框先亮起来——提前反馈 UI 感觉：

`View` 容器通过 touchstart 或 click 快速给边界添加“准入证”。再同步至原生 `onTouchStart`/`onClick` 中调用 `focus` 与本地 `isFocused` 更新:

`onClick` 回调中继续判断是否已聚集，如果没有则立即开启激活与视图聚集：

# 原生 Focus 来了再做一次兜底同步：