autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete

Question

I have an form with autocomplete disabled but it does not works and makes the autocomplete to be enabled in firefox and higher version of chrome

<form method="post" autocomplete="off" action="">     <ul class="field-set">     <li>         <label>Username:</label>         <input type="text" name="acct" id="username" maxlength="100" size="20">     </li>     <li>         <label>Password:</label>         <input type="password" name="pswd" id="password" maxlength="16" size="20" >     </li>     <li>         <input type="submit" class="button" value="Login" id="Login" name="Login">     </li>     </ul> </form> 

When the type is changed from password to text it works in all browser. Can anyone help to solve this issue?

Answer 1

You can just make the field readonly while form loading. While the field get focus you can change that field to be editable. This is simplest way to avoid auto complete.

<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" /> 

Answer 2

When I faced the same problem I resolved by creating a temporary text box above the password field and hide it

like this,

<form method="post" autocomplete="off" action="">     <ul class="field-set">     <li>         <label>Username:</label>         <input type="text" name="acct" id="username" maxlength="100" size="20">     </li>     <li>         <label>Password:</label>         <input type="text" style="display:none;">         <input type="password" name="pswd" id="password" maxlength="16" size="20" >     </li>         ...     </ul> </form> 

It will make the username text field not to show any previously typed words in a drop down. Since there is no attribute like name, id for the input field <input type="text" style="display:none;"> it wouldn't send any extra parameters also.

I am Not sure this is a good practice, but it will resolve the issue.