html solves the problem of browser remembering password input box

After submitting the form in the browser, the browser will generally prompt "Do you need to remember the password?" After confirmation, certain input boxes will be automatically filled in the next time the form is submitted.

However, in some scenarios (such as on withdrawal and recharge pages), automatically filling in passwords is very unsafe. Some means are needed to prevent browser autofill.

I encountered some pitfalls during the solution process. Here are some notes:

Use the HTML attribute autocomplete="off"

Since the autofill feature is implemented by the browser itself, the autocomplete attribute has not been written into the W3C specification. Many browsers will simply ignore this attribute. Autofill cannot be disabled.

It is natural to think of a way to use js to set the input value to empty when the page is loaded, but the browser's auto-fill is actually filled in after the js is executed. . . After using js to set the value of the input to be empty, the browser automatically filled the input, which could not solve the problem.

Add <input type="password"/>

A method that is widely circulated on the Internet. This method is feasible on most versions of browsers, but does not work on some higher versions of browsers and Safari. Several methods introduced later are based on improvements of this method.

<!-- Additional input -->
<input type="password" style="display:none"/>
<!-- Original input -->
<input type="password"/>

Add form

This method solves the problem of automatic filling in Safari compared to the above one. But it doesn't work in some higher versions of Chrome. (After testing, Chrome 46.0 works, Chrome 47.0 fails)

<!-- Additional form and input -->
<form style="display:none">
  <input type="password"/>
</form>
<!-- Original input -->
<input type="password"/>

final solution

This solution combines the above two methods, and finally solves the problem of automatic filling under Chrome 47.0.

<!--Additional content-->
<form style="display:none">
  <input type="password"/>
</form>
<input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
<!-- Original input -->
<input type="password"/>

What needs to be noted in this method is that the input that is the same generation as the target input cannot be set to display:none. If it is set, it will be automatically filled in Chrome 47.0, so you can only use other means to hide this input.

Summary

After using the last solution, it runs well in various browsers, and no automatic filling is found for the time being. Sure enough, front-end compatibility issues have always been a disgusting thing. .

This concludes this article about how HTML solves the problem of remembering password input boxes in browsers. For more information about remembering password input boxes in HTML, please search previous articles on downcodes.com or continue browsing the related articles below. I hope you will support downcodes.com more in the future!