Emmmm, this is a small problem that UI caught up with me while I was developing a project with React. Since ios11, iPhone browsers have auto-filled passwords, but this has been a bit of a problem for me. Specifically, it is a page for mobile phone number and password login. Ios recognizes that there is a password input box on the current page, so it triggers the automatic password filling function. The last GIF here is a little bit more intuitive.

You can obviously see the top of the keypad flickering up and down when typing on ios (android doesn’t).

I developed react, so I initially decided that I had to write the input box as a controlled component, and then did a lot of things during the input box input to cause this effect. Then I went straight to a pure page with only the phone number and password fields, and the result was the same.

A quick Internet search turns up two solutions

// Set 'autocomplete' to 'off', which applies to normal text boxes<input type="text" autoComplete="off"/>// Set 'autocomplete' to 'new-password', which applies to the password input box<input type="password" autoComplete="new-password"/>
Copy the code

But in fact, the above two ways are not effective in the common browser, although other blogs said that the reason is in this so I simply remove the top of the phone number keyboard “password” part, then the question comes, how to remove this thing? In fact, there is a behavior in the browser, when the mobile phone number input field and password input field are adjacent to each other, when entering the mobile phone number, there will be this effect of automatic password filling. Since we found the rule, we can use a hidden input to block this connection

<div className={styles.box}>
  <div className={styles.item}>
    <div className={styles.label}>Mobile phone no.</div>
    <input type="tel" className={styles.value} placeholder="Please enter your mobile phone number." />
  </div>{/* The hidden input is used to block */}<input
    type="text"
    style={{
      opacity: 0.width: 0.height: 0,
    }}
  />
  <div className={styles.item}>
    <div className={styles.label}>password</div>
    <input
      type="password"
      className={styles.value}
      placeholder="Please enter your password"
      autoComplete="new-pwd"
    />
  </div>
  <button type="submit" className={styles.btn}>submit</button>
</div>
Copy the code

Final effect: