The HTML autocomplete attribute can be used for <input> elements, <textarea> elements, < SELECT > elements, and <form> elements that take text or numeric values as input.

Prompt box for account password:

Usually we useautocomplete="off"Disable browser autofill and/or text prompt, as shown:

In most browsers, however, setting this does not prevent input[type=password] from automatically filling in the password and asking if you want to save the password. See the Autocomplete Attribute and Login Fields if you are interested in why this is done.

Instead of letting users manually change their browser Settings, how do we disable automatic prompt or hidden password prompt at the code level?

Let’s start by looking at how the browser fills in the password for a form (the mechanism varies slightly from browser to browser). In Chrome’s case, it works like this:

  • User information has been saved in this domain name.
  • Find the first oneinput[type=password]Element, padding password; And find the one before itinput[type=text]Element to fill in the user name.

If the input element display: None is not populated, the browser will continue to look up the input[type=text] element and visibility:hidden will be populated.

Input [type=text] elements that match the above criteria will display a password popup when given focus.

Disable automatic password filling and focus on the password pop-up box

The password is automatically filled in the loading screen

This is done by setting the attribute autocomplete=”new-password” on the inpTU [type=password] element

<form>
    <div>
      <input type="text"  name="test"></input>
    </div>
    <div>
      <input type="password" autocomplete="new-password" name="password"></input>
    </div>
    <button>save</button>
  </form>
Copy the code

Disable automatic password filling, and the password pop-up box is not displayed in focus

Follow the password prompt fill logic, put two input fields do not display to fool the browser, you can not display the pop-up box.

<form>
  <input style="opacity: 0; position:absolute; width:0; height:0;">
  <input type="password" style="opacity: 0; position:absolute; width:0; height:0;">
  <div>
    <input type="text" autocomplete="off" name="test"></input>
  </div>
  <div>
    <input type="password" autocomplete="off" name="password"></input>
  </div>
  <button>save</button>
</form>
Copy the code

Note: If the user has saved account information in the current domain, the focus password popup will fill in automatically even if the original code is subsequently changed to the code above.

data

  • The browser automatically fills in the password after saving it
  • The HTML autocomplete property