问题描述

当用户在输入手机号后，自动获取验证码功能会将焦点从手机号输入框切换到验证码输入框，导致 blur 和 focus 事件被多次触发，从而引发 window.scrollTo 定位异常。

window.scrollTo 的适配

为适配 iOS 设备，在 input 的 blur 和 focus 事件上绑定 window.scrollTo，以便在键盘弹出时，页面元素能够正确上移。实现代码如下：

1
2
3
4
5
6
7
export function handleInputScroll(isBlur: boolean) {
  if (isBlur) {
    window.scrollTo(0, CacheData.cacheScroll)
  } else {
    CacheData.cacheScroll = window.screenY
  }
}

解决方案

setTimeout 尝试

最初的思路是通过增加延迟（setTimeout）来避免事件触发过快。在 iOS 模拟器的 Safari 浏览器上，这一方案有效，但在真机上却无法生效。根本原因在于 Safari 的安全策略：只有在用户主动、直接交互（如 click、touchstart 等）事件处理流程中，调用 focus() 方法才能成功弹出键盘。

debounce（最终解决方案）

通过防抖（debounce）机制，避免 window.scrollTo 被多次触发，从而保证页面滚动行为的正确性。