ios手机号码输入框键盘闪烁

emmmm，这个是我最近在用react开发项目的过程中被UI揪出来的一个小问题。
自ios11开始，苹果手机的浏览器就有了自动填充密码的功能，但是这个功能给我造成了一定的困扰。
具体来说就是一个手机号密码登录的页面，ios识别到当前页面有密码输入框，所以触发了自动填充密码的功能。
这里上一个gif图看得会比较直观一点。

我们可以很明显地看到，ios手机号键盘顶部在用户输入的时候一闪一闪的相当晃眼（安卓手机不会）。
我是用react开发的，所以一开始判定是我把这个输入框写成受控组件，然后在输入框输入的过程中进行了很多操作才会导致这种效果。后来我直接开了一个纯净的页面，里面只有手机号码输入框和密码输入框，结果还是一样。
网上一搜就可以搜到下面两种解决方案

// 设置`autocomplete`为`off`,适用于普通文本框
<input type="text" autoComplete="off"/>
// 设置`autocomplete`为`new-password`，适用于密码输入框
<input type="password" autoComplete="new-password"/>
复制代码

但是其实以上这两种方式在常用的浏览器上面都是没有效果的，尽管其他博客说得那么天花乱坠原因在这
所以我索性把手机号键盘顶部的“密码”部分去掉，那么问题来了，怎么去掉这块东西？其实浏览器有一种行为，就是当手机号输入框和密码输入框是相邻关系的时候，在输入手机号码的时候就会有这种自动填充密码的效果，既然发现了规律，我们可以用一个隐藏的input阻断这种联系

<div className={styles.box}>
  <div className={styles.item}>
    <div className={styles.label}>手机号</div>
    <input type="tel" className={styles.value} placeholder="请输入手机号" />
  </div>
  {/* 该隐藏的input用于阻断 */}
  <input
    type="text"
    style={{
      opacity: 0,
      width: 0,
      height: 0,
    }}
  />
  <div className={styles.item}>
    <div className={styles.label}>密码</div>
    <input
      type="password"
      className={styles.value}
      placeholder="请输入密码"
      autoComplete="new-pwd"
    />
  </div>
  <button type="submit" className={styles.btn}>
    提交
  </button>
</div>
复制代码

最后的效果：

ios手机号码输入框键盘闪烁

猜你喜欢