Summary of record work – Solve the browser form auto-fill problem

Problem Description:

If it is a site with the same domain name, you have logged in to the site before and selected remember password, or set auto fill in Settings.

Chrome will automatically fill in your account password, or pull down your history to us.

Automatic filling:

Drop-down history:

Conditions for automatic filling:

1. In the case of a user and password included in a form, both elements of type=”text” and type=”password” without the readonly and disabled attributes can be included without the name and ID attributes

2. In the absence of a form, contain both type=”text” and type=”password” elements without readonly and disabled attributes, and both elements have at least name or ID attributes (name and ID can be any value but cannot be empty or blank).

Different types of browsers or even different versions of browsers of the same type may lead to different final results

So some browsers, they fill in one group, some browsers fill in several groups that match the criteria, some don’t care about the style, some don’t care about the style. An explanation for the Internet search

Browser filling mechanism: After repeated testing, it is found that the automatic filling mechanism of the browser is satisfied: the page has an input of type=password and this input is preceded by an input of type=text. Firefox and 360 handle this by detecting pages that satisfy the padding mechanism, whether display: None or not. And if there are a few that meet the criteria, fill in a few. Chrome 54 is slightly different: it meets the above criteria and has only one input of type=password. The first input of type=text is automatically filled with the account, and the input of type=password is automatically filled with the password. So chrome 54 does not have the problem of auto-filling the registration page

The solution

Solution:

Chrome

(1) Input does not fill the name attribute, will not fill (unknown reason)

The input style can be display: None, but it seems that some browser versions do not take effect, so use visibility:hidden to be safe

(2) Drop down the history selection box

Without the default autofill, there is still a drop-down history selection, and after the password is selected, the account is filled into the nearest text input field

Although this password selection history should not have the scene, but once it happens, the user experience is not good, so I add a hidden input box above the password input, I tried to hide the input box, it is invalid, useless. So you position the input block far away and pretend it’s hidden

(3) the autocomplete

Use the new HTML5 attribute autoComplete =”off” but disable input 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. It seems not suitable for 360 browser, so we can set autocomplete=”new-password” to achieve no filling effect (netease added autocomplete).

(4) 360 speed browser

Chrome is done, but on the 360 Ultra Speed browser, you’ll find that there is no automatic password filling

So I added another input field, and readyOnly didn’t satisfy the auto-fill requirement.

I have found that there is no fixed solution, and that you may need to combine multiple approaches in order to ensure compatibility with all browsers. And then verify it across different browsers.