Note: For Chrome, the Autocomlete attribute does not apply to IE

The problem background

In the project, often need to form submission, after when we fill in the form, without clicking the save button or submit button, ordered the following logo, jump back to the home page, page at this time, we through the browser’s back button, can return to fill out the form page before, at this moment, will be selected or fill in the value of the displayed before, But our page has A value assignment problem, A value assigned to B phenomenon. What causes this?

Question why

After some positioning, we found the reason. The reason the browser remembers the previous value when it uses the forward or backward function is because the browser’s Autocomplete property for input is turned on by default, so it remembers that when we go back to the previous page, AutoComplete will backfill the remembered value. Backfill is based on the name attribute on the input tag. The value previously filled will be displayed according to the name attribute. If the name attribute is not configured, there will be the problem of incorrect assignment, and some values will be assigned to the previous field.

The solution

  1. In order to assign the correct value to the correct field, we need to giveinputThe configuration propertiesnameattribute
  2. Instead of displaying the previous values, we can change theautocompleteSet tooff

The code is as follows:

 <input type='text' name='userName' id='userName' autocomplete='off'/>
Copy the code

other

IE does not work on autocomplete=’off’, there are many schemes on the Internet, but it does not work on the browser’s forward and backward operation. Later, it is found that the input type is changed to button, IE will not record the previous value, and the value obtained by backward operation is empty. So we changed the type of the hidden input tag to button to solve our IE compatibility problem

 <input type='button' name='userName' id='userName' autocomplete='off'/>
Copy the code

The resources

  • The HTML <input> tag’s autocomplete property
  • autocomplete Attribute