前言

曾经在浏览掘金文章时瞥到过有人分享类似的文章，大体思路上是用6个input来实现6个输入框，通过调整input的样式进而来实现这个输入短信验证码功能。刚好，最近有项目需要实现这样的验证码功能。↓↓↓

按照之前从类似技术文章汲取的思路，我也采用6个input来实现，开发环境下PC模拟表现良好，达到了预期，用安卓手机自测表现良好，并未发现什么问题。然后就部署到了测试环境，并提交测试。

问题

果不其然，这种实现方式在IOS出问题了?，以下为实测图↓↓↓

可以看到在输入短信验证码的过程中整个页面会抖动，用户体验很不友好。? 这种效果是完全不敢投入到线上的，那出现了问题就要想办法解决问题，分析IOS和安卓上的不同表现，追根溯源找出症结所在。

键盘弹出的不同表现

• IOS：IOS 的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度，而只有键盘弹出时页面恰好也滚动到最底部时，scrollTop 的变化值为键盘的高度，其他情况下则无法获取。这就导致在 IOS 情况下难以获取键盘的真实高度。
• Android: webview 中留出空间，该空间小于等于的键盘空间，变化的高度差会随着布局而不同，有的认为键盘高度 + 页面高度 = 原页面高度； 是错误的误导，只有在某种很巧合的布局情况下才可套用此公式。

键盘收起的不同表现

• IOS：触发键盘上的按钮收起键盘或者输入框以外的页面区域时，输入框会失去焦点，因此会触发输入框的 blur 事件。
• Android: 触发键盘上的按钮收起键盘时，输入框并不会失去焦点，因此不会触发页面的 blur 事件；触发输入框以外的区域时，输入框会失去焦点，触发输入框的 blur 事件。

总结原因

结合键盘弹出和键盘弹起在不同平台的不同表现，可以看到症结所在：IOS上在6个input间输入数字的时候，会在上一个input获得焦点后，马上失去焦点，下一个input又立即获得焦点，从而出现页面抖动。

解决思路

既然页面抖动是由多个input间频繁获得焦点失去焦点引起的，那我们为何不干脆只使用一个input来实现呢？具体思路是用六个div标签模拟输入框下面的小横线，再使用一个input盖在第一个小横线上，每输入一个数字当前input输入框右移，并且设置当前输入框一直为空(这并不妨碍获取到输入的数字)，光标保持闪烁，将输入的数值展示在前一个模拟输入框上，当输完6个数字后失去焦点，键盘收起，同时input隐藏，页面开始loading进而开始调接口校验验证码。若验证码校验失败，则input恢复展示，同时清空掉原来输入的状态值，恢复到初始状态。

tsx绑定
手机号金额等都是从接口获取，为便于展示，此处使用的是伪数据。

  <div className={styles.captchaBody}>
    <div className={styles.amount}>¥ 10000</div>
    <div className={styles.phone}>
      <p className={styles.tip}>输入短信验证码</p>
      <p className={styles.send}>
        <span>验证码已发送至</span>
        <span className={styles.number}>137****5064</span>
      </p>
    </div>
    <div className={styles.phoneCode}>{renderCaptchaItem()}</div>
    <input
      value={''}
      ref={inputEle}
      style={{ transform: `translate(${x}px, -32px)` }}
      className={styles.inputItem}
      autoFocus
      onChange={handleChange}
      onKeyDown={handleDelete}
      maxLength={1}
    />
  </div>
  <div className={styles.reGet + ' ' + (count > 0 ? '' : styles.hide)}>
    {count}秒后重新获取
  </div>

less样式及具体函数交互细节我就不贴代码啦，有兴趣可参阅我的GitHub， 我已经把它整理出来了

参考资料

• H5 键盘兼容性小结