el teclado del cuadro de entrada del número de teléfono móvil ios parpadea

Emmmm, este es un pequeño problema que descubrí recientemente por UI en el proceso de desarrollo de un proyecto con react.
Desde ios11, el navegador del teléfono móvil de Apple tiene la función de completar automáticamente las contraseñas, pero esta función me ha causado algunos problemas.
Específicamente, es una página de inicio de sesión con número de teléfono móvil y contraseña. ios reconoce que la página actual tiene un cuadro de entrada de contraseña, por lo que activa la función de completar automáticamente la contraseña.
La imagen gif anterior aquí será más intuitiva de ver.

Podemos ver claramente que la parte superior del teclado del número de teléfono de iOS parpadea deslumbrantemente cuando el usuario está escribiendo (los teléfonos Android no lo hacen).
Lo desarrollé con reaccionar, por lo que al principio decidí escribir este cuadro de entrada como un componente controlado, y luego hice muchas operaciones durante el proceso de entrada del cuadro de entrada para causar este efecto. Más tarde, abrí directamente una página pura con solo el cuadro de entrada del número de teléfono móvil y el cuadro de entrada de la contraseña, y el resultado seguía siendo el mismo.
Una búsqueda en Internet puede encontrar las siguientes dos soluciones

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

Pero, de hecho, los dos métodos anteriores no tienen efecto en los navegadores de uso común, aunque otros blogs dicen que la razón es esta
, así que simplemente eliminé la parte de "contraseña" en la parte superior del teclado del número de teléfono móvil, entonces la pregunta es , como Quitar esta cosa? De hecho, el navegador tiene un comportamiento, es decir, cuando el cuadro de entrada del número de teléfono móvil y el cuadro de entrada de la contraseña están adyacentes, tendrá el efecto de completar automáticamente la contraseña al ingresar el número de teléfono móvil. regla, podemos usar una entrada oculta que bloquea esta conexión

<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>
复制代码

El efecto final: