uniapp隐藏短信验证码输入框失焦问题

Question

在使用 UniApp 开发移动端应用时，常通过 `input` 组件实现短信验证码输入功能。当设置 `type="number"` 或使用 `password` 模式隐藏输入内容时，iOS 系统下输入框在快速输入或键盘收起时易出现失焦（blur）异常，导致光标消失、输入中断或无法触发 `@blur` 事件。该问题多出现在嵌套在 `scroll-view` 或 `popup` 中的输入框，影响自动聚焦与表单验证逻辑，尤其在真机调试时更为明显，严重影响用户体验。

Answer 1

一、问题现象与背景分析

在使用 UniApp 开发跨平台移动端应用时，短信验证码输入是一个高频交互场景。开发者通常采用原生 <input> 组件，并设置 type="number" 以调用数字键盘，或启用 password 模式隐藏输入内容以增强安全性。

然而，在 iOS 系统（尤其是 iPhone 设备）中，当此类输入框嵌套于 <scroll-view> 或 <uni-popup> 等容器内时，频繁出现失焦（blur）异常问题。具体表现为：

• 快速连续输入时光标突然消失
• 键盘自动收起后无法再次聚焦
• @blur 事件未被触发，导致表单验证逻辑失效
• 页面滚动后输入框失去焦点，且不响应 focus() 方法

该问题在 H5 和 App 平台均存在，但在真机调试中尤为显著，严重影响用户体验和业务流程的完整性。

二、技术原理与底层机制剖析

iOS 的 WebKit 渲染引擎对输入框的焦点管理有严格限制，尤其是在非标准文档流中的元素（如 fixed 定位、overflow: scroll 内部子元素）。UniApp 编译后的结构在 iOS 下通过 WKWebView 渲染，其 DOM 行为与原生浏览器存在差异。

以下是导致失焦的核心原因：

原因分类	说明
CSS 层级与滚动截断	scroll-view 使用了 -webkit-overflow-scrolling: touch，创建了独立的合成层，导致 input 脱离主文档流，影响焦点传递
软键盘弹出引发重排	iOS 键盘展开会触发 viewport resize，引起组件重新渲染，可能中断当前 focus 状态
Popup 动画干扰	popup 显示/隐藏过程涉及 transform 动画，WebKit 可能暂停某些 DOM 事件监听
Input 类型兼容性	type="number" 在部分 iOS 版本下默认开启“密码自动填充”功能，干扰正常输入流

三、解决方案演进路径

1. 避免将 input 放置在 scroll-view 内部，改用页面级滚动
2. 使用 textarea 替代 input[type=number] 并配合 pattern 控制输入类型
3. 监听 @focus 和 @input 事件手动维护焦点状态
4. 延迟执行 blur 处理逻辑，防止键盘收起瞬间误判
5. 在 popup 中动态插入 input 至 body 层，脱离父级容器影响
6. 使用原生插件（如 plus.nativeObj.view）接管输入区域
7. 引入虚拟键盘方案，完全绕过系统键盘交互
8. 升级至最新版 HBuilderX 与 uni_modules 生态组件库

四、推荐实践代码示例

<template>
  <view class="verify-container">
    <!-- 使用 text 类型 + pattern 避免 number 类型问题 -->
    <input
      v-for="(item, index) in codes"
      :key="index"
      :value="item"
      type="text"
      inputmode="numeric"
      pattern="[0-9]*"
      maxlength="1"
      @input="onInput($event, index)"
      @focus="onFocus(index)"
      @blur="onBlur(index)"
      ref="inputs"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      codes: ['', '', '', '', '', '']
    }
  },
  methods: {
    onInput(e, idx) {
      const val = e.detail.value
      this.$set(this.codes, idx, val)
      // 自动跳转下一个输入框
      if (val && idx < 5) {
        this.$nextTick(() => {
          this.$refs.inputs[idx + 1].focus()
        })
      }
    },
    onFocus(idx) {
      // 延迟清空其他输入框选中状态，避免冲突
      setTimeout(() => {
        const selection = window.getSelection()
        if (selection && selection.removeAllRanges) {
          selection.removeAllRanges()
        }
      }, 100)
    },
    onBlur(idx) {
      // 使用 setTimeout 包裹 blur 逻辑，规避 iOS 键盘收起瞬时 bug
      setTimeout(() => {
        console.log('Input blurred at:', idx)
        // 执行验证或其他逻辑
      }, 300)
    }
  }
}
</script>
    

五、架构级优化建议与流程图

对于复杂表单或高频输入场景，建议从架构层面重构输入管理模块。以下为推荐的输入焦点控制流程：

graph TD
            A[用户点击输入框] --> B{是否在scroll-view或popup中?}
            B -- 是 --> C[动态创建浮层并插入input到body]
            B -- 否 --> D[直接focus]
            C --> E[绑定focus/input/blur事件代理]
            E --> F[输入完成或blur触发]
            F --> G[同步数据回原始model]
            G --> H[销毁临时input或隐藏浮层]
            D --> I[正常事件流处理]
            I --> J[验证逻辑执行]

六、监控与调试策略

为定位真实环境下的失焦问题，可集成如下调试手段：

• 使用 plus.webview.currentWebview().showRefreshButton() 开启 native 日志输出
• 在 @focus 和 @blur 中打印 timestamp 与 activeElement 状态
• 通过 document.hasFocus() 和 inputRef.$el?.contains(document.activeElement) 判断实际焦点归属
• 利用 Sentry 或自研错误上报系统收集 blur 事件丢失率指标
• 在 CI 流程中加入真机自动化测试（如 Macaca、Airtest）