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   lt form method  post  autocomplete  off  action    gt       lt ul class  field-set  gt       lt li gt           lt label gt Username  lt  label gt           lt input type  text  name  acct  id  username  maxlength  100  size  20  gt       lt  li gt       lt li gt           lt label gt Password  lt  label gt           lt input type  password  name  pswd  id  password  maxlength  16  size  20   gt       lt  li gt       lt li gt           lt input type  submit  class  button  value  Login  id  Login  name  Login  gt       lt  li gt       lt  ul gt   lt  form gt    When the type is changed from password to text it works in all browser   Can anyone help to solve this issue

User · Answer

My solution inspired here goes as follows:

<form>
    <input type="text" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    <input type="password" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    Username: <input type="text">
    Password: <input type="password">
    <input type="submit">
</form>

It sure is ugly, feels misplaced in 2017, but it works and protects the username and password field from autofilling. Note that in Firefox (version 51 at the time of writing) it does not matter a bit what combination of name, id or autocomplete is used, be it on form or input fields. Without the first two dummy fields, autofilling will take place any time domain is matched and it will ruin your day.

User · Answer

use this simple code   lt input type  password  class  form-control ltr auto-complete-off  id  password  name  password  autocomplete  new-password  gt

User · Answer

Try setting autocomplete  new-password  as shown below    lt input type  password  name  pswd  id  password  maxlength  16  size  20  autocomplete  new-password    gt

User · Answer

lt input type  password  placeholder  Enter Password  class  form-control  autocomplete  new-password  gt    Here you go

User · Answer

Just add the autocomplete  new-password attribute to your password input field   To learn more about autocomplete  https   html spec whatwg org multipage forms html attr-fe-autocomplete-new-password

User · Answer

I ve tried all sort of workarounds  but just that combination worked on all browsers in my case    lt input type  password  id  Password  name  Password          autocomplete  new-password          onblur  this setAttribute  readonly    readonly             onfocus  this removeAttribute  readonly     readonly gt    And it s quite clean solution too

User · Answer

When I faced the same problem  I came across two methods to solve it   Using javascript Using html  by creating a temporary text box above the password field and hide it   Example using javascript  lt input onfocus  quot this type  password  quot  onblur  quot if  this value length  lt   0    this type    text    else     quot  id  quot password quot   gt   Example using html  by creating a temporary text box just above the password field and hide it     lt input type  quot text quot  style  quot display none  quot  gt     lt input id  quot password quot  type  quot password quot  gt

User · Answer

A different approach is to clean the value of the password field on page load instead of trying to prevent it from auto-filling   With jQuery simply add something like     function        input type  password     val

User · Answer

autocomplete off is largely ignored in modern browsers - primarily due to password managers etc   You can try adding this autocomplete  new-password  it s not fully supported by all browsers  but it works on some   x000D   x000D   lt form method  post  autocomplete  off  action    gt  x000D       lt ul class  field-set  gt  x000D       lt li gt  x000D           lt label gt Username  lt  label gt  x000D           lt input type  text  name  acct  id  username  maxlength  100  size  20  gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt label gt Password  lt  label gt  x000D           lt input type  text  style  display none   gt  x000D           lt input type  password  name  pswd  id  password  maxlength  16  size  20  autocomplete  new-password  gt  x000D       lt  li gt  x000D              x000D       lt  ul gt   lt  form gt  x000D   x000D   x000D

User · Answer

Just Found Another Simple Solution and worked for me on all 3 main browsers Chrome Firefox and Opera   lt input type  text  onfocus  this type  email    gt   lt input type  text  onfocus  this type  password    gt

User · Answer

Why Don t Everyone Use This               lt form gt               lt div class  user  gt               lt i gt   lt  i gt               lt input type  text  id  u1  name  u1  value  User Name  onfocus  this value        onblur  if  this value         this value    User Name     gt                      lt  div gt                         lt div class  user1  gt                lt i gt   lt  i gt                       lt input type  password  id  p1  name  p1  value  Password  onfocus  this value        onblur  if  this value         this value    Password      gt               lt  div gt               lt div class  user2  gt                                        lt input type  submit  value  Login  gt               lt  div gt           lt  form gt    It s So Simple

User · Answer

I ve found that if the input has no name  e g  the name attribute is not set   the browser can t autocomplete the field  I know this is not a solution for everyone  but if you submit your form through AJAX  you may try this

User · Answer

I think this issue is specific for the browser chrome   so you can manage by adding a condition for chrome only Like    Html PasswordFor model   gt  model Password  new    autocomplete    Request Browser Browser ToLower   Contains  chrome      new-password     off            autocomplete    Request Browser Browser ToLower   Contains  chrome        new-password     off

User · Answer

Browser s normally have two related yet different features regarding forms    Form auto-complete  where items of  lt input type  text  gt  type  and similar  collect typed values and offer them back in the form of a drop-down list  It s a simple feature that works pretty well   Password manager  where browser prompts to remember username password combinations when it detects you ve submitted a login form  When returning to the site  most browsers display available usernames in a drop-down box  Firefox  Chrome  Internet Explorer     but some have a toolbar button  Opera   Also  Chrome highlights the fields in hard-coded yellow   This depends on heuristics and might fail on certain pages     There s an edge case with forms tagged as autocomplete  off   What happens if it s a login form and the user has previously stored a username password  Actually removing the password from the local database looks like inappropriate so probably no browser does so   In fact  data from form auto-complete is not erased either   Firefox decides to give power to the user  you have a password  so I ll let you use it  Chrome decides to give power to the site

User · Answer

My sol     lt input oninput  turnOnPasswordStyle    id  inputpassword  type  text  gt   function turnOnPasswordStyle            inputpassword   attr  type    password

User · Answer

When I faced the same problem I resolved by creating a temporary text box above the password field and hide it  like this    lt form method  post  autocomplete  off  action    gt       lt ul class  field-set  gt       lt li gt           lt label gt Username  lt  label gt           lt input type  text  name  acct  id  username  maxlength  100  size  20  gt       lt  li gt       lt li gt           lt label gt Password  lt  label gt           lt input type  text  style  display none   gt           lt input type  password  name  pswd  id  password  maxlength  16  size  20   gt       lt  li gt                   lt  ul gt   lt  form gt    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  lt input type  text  style  display none   gt  it wouldn t send any extra parameters also   I am Not sure this is a good practice  but it will resolve the issue

User · Answer

Adding autocomplete  off  is not gonna cut it - it s ignored by Chrome   Change input type attribute to type  search   Google doesn t apply auto-fill to inputs with a type of search

User · Answer

Here s a hack that seems to work in Firefox and Chrome   In Firefox  having a disabled text field just before the password field seems to do the trick  even if it is hidden  disabled  none   In Chrome  it has to be visible though   So I suggest something like this    HTML    lt input class  password-autocomplete-disabler  type  text  disabled gt   lt input type  password  name  pwd  gt    CSS    input type text  password-autocomplete-disabler       position  absolute  important      left  -10000px  important      top  -10000px  important

User · Answer

This will prevent the auto-filling of password into the input field s  type  password      lt form autocomplete  off  gt     lt input type  password  autocomplete  new-password  gt   lt  form gt

User · Answer

You should absolutely not do this  By disallowing and interfering with password completion you are making your users less safe  The correct coding for a password field should include   autocomplete  current-password    Making a user type a password means that that they have to use a weak password that they can accurately type  not use a password manager and a complex  unique  and long password  For a detailed discussion on this see  https   www ncsc gov uk blog-post let-them-paste-passwords

User · Answer

For password   its not working currently   So by default make password field as text and use following js code      x000D   x000D      real-password   on  input   function    x000D              if    this  val             x000D                    this  attr  type    password    x000D                else   x000D                    this  attr  type    text    x000D                x000D         x000D   x000D   x000D

User · Answer

I know this is an old question  but browsers have been changing over time  Although some of the answers to this question mentioned here like  creating a temporary text box above the password field and hiding it may have worked in the past  currently the easiest way to prevent the browser from popping up the password manager is to have at least three separate additional hidden password inputs  each with different dummy values  like so    lt form method  post  autocomplete  off  action    gt       lt ul class  field-set  gt       lt li gt           lt label gt Username  lt  label gt           lt input type  text  name  acct  id  username  maxlength  100  size  20  gt       lt  li gt       lt li gt           lt label gt Password  lt  label gt           lt input type  password  name  pswd  id  password  maxlength  16  size  20   gt           lt input type  password  style  display  none   value  dummyinput1   gt           lt input type  password  style  display  none   value  dummyinput2   gt           lt input type  password  style  display  none   value  dummyinput3   gt       lt  li gt       lt li gt           lt input type  submit  class  button  value  Login  id  Login  name  Login  gt       lt  li gt       lt  ul gt   lt  form gt

User · Answer

I was recently faced with this problem  and with no simple solution since my fields can be prepopulated  I wanted to share an elegant hack I came up with by setting password type in the ready event   Don t declare your input field as type password when creating it  but add a ready event listener to add it for you with jQuery    lt input type  text  name  pswd  id  password  maxlength  16  size  20   gt    lt script gt    function        document getElementById  password   setAttribute  type    password         lt  script gt

User · Answer

For text type use autocomplete  off  or autocomplete  false    lt input id  username  type  text  autocomplete  false  gt    For password type use autocomplete  new-password    lt input id  password  type  password  autocomplete  new-password  gt

User · Answer

What worked for me  was use autocomplete  new-password  only in input type  password   like this    lt input id  username  type  text  gt   lt input id  password  type  password  autocomplete  new-password  gt    Independently of how many input have the form

User · Answer

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    lt input name  password  id  password  type  password  autocomplete  false  readonly onfocus  this removeAttribute  readonly       gt

User · Answer

lt input type  quot password quot  id  quot byLast quot  class  quot bump25 quot  autocomplete  quot new-password quot  onclick  quot this type  text  quot    gt     This worked for me

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

Examples related to html

Examples related to autocomplete