Automatic password filling mechanism of the browser

In Chrome, for example, when type=”text” is next to the tag of type=”password”, the auto-fill behavior is triggered. The default is yellow background. Firefox and 360 handle this by detecting pages that satisfy the padding mechanism, whether display: None or not.

The solution

  1. Set the browser does not prompt to remember the password, remember the password of the website is visible in the Settings, and can be removed (obviously, this method is not a cure, I want to remember the password is not good?
  2. Use the new HTML5 attribute AutoComplete =”off” but disable autofill. This property seems to have been initiated by Firefox and is not a standard property, so it is mainly for IE and get browsers. Google does not recognize this attribute. So it didn’t have any effect on Chrome
  3. Since the browser encountered type=”text” and type=”password<input/>If the automatic fill behavior is triggered when the tags are next to each other, both<input/>Separate, use the hidden way “trick” browser, the password information in the hidden area.
.is-hidden {
    position: absolute;
    left: -10000px;
    top: -10000px;
}
Copy the code
/* Make input invisible instead of display: none. If you display: none, some browsers don't work, such as Google */ <inputtype="text"  class="is-hidden" />
<input  type="password"  class="is-hidden" />
Copy the code
  1. Modify the readonly attribute
 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Copy the code

By setting the form input to readable mode, browser auto-fill is disabled and the readable property is removed when the focus is on the form input. The method is simple and easy to use

conclusion

The method introduced above is not the whole solution. At present, I use the fourth method mostly. Although the third method is also quite useful, it does not conform to my style to increase the types of labels, so I silently use the fourth method. Welcome to add more methods, to be continued!