[html] Input type=password, don't let browser remember the password

I remember seeing a way to have an <input type="password" /> such that the browser will not prompt the user to save the password. But I'm drawing a blank. Is there an HTML attribute or some JavaScript trick that will do this?

<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Here you go.

I solved in another way. You can try this.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

#another way

 <script type="text/javascript">    
 function setAutoCompleteOFF(tm){
    if(typeof tm =="undefined"){tm=10;}
    try{
    var inputs=$(".auto-complete-off,input[autocomplete=off]"); 
    setTimeout(function(){
        inputs.each(function(){     
            var old_value=$(this).attr("value");            
            var thisobj=$(this);            
            setTimeout(function(){  
                thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
                thisobj.val(old_value);
            },tm);
         });
     },tm); 
    }catch(e){}
  }
 $(function(){                                              
        setAutoCompleteOFF();
    });
</script>

// you need to add attribute autocomplete="off" or you can add class .auto-complete-off into the input box and enjoy

Example:

  <input id="passfld" type="password" autocomplete="off" />
    OR
  <input id="passfld" class="auto-complete-off" type="password"  />

The only way I can get firefox, edge, and Internet explorer to turn off autocomplete is to add autocomplete="false" in my form statement like:

  <form action="postingpage.php" autocomplete="false" method="post">

and I have to add the autocomplete="off" to my form input and change the type to text Like:

     <input type="text" autocomplete="off">

It seems that this html code needs to be standardized with the browsers. the form type = password should be revised so that it overrides browser settings. The only issue I have is that I lost my input masking. But on the bright side the annoying "this site is not secure" is not showing up in firefox.

for me, its not a big deal since the user is already authenticated and its my change user name and password portion of it

You can use JQuery, select the item by id:

$("input#Password").attr("autocomplete","off");

Or select the item by type:

$("input[type='password']").attr("autocomplete","off");

Or also:

You can use pure Javascript:

document.getElementById('Password').autocomplete = 'off';

I've found the following works on Firefox and Chrome.

<form ... > <!-- more stuff -->
<input name="person" type="text" size=30 value="">
<input name="mypswd" type="password" size=6 value="" autocomplete="off">
<input name="userid" type="text" value="security" style="display:none">
<input name="passwd" type="password" value="faker" style="display:none">
<!-- more stuff --> </form>

All of these are within the forms section. "person" and "mypswd" are what you want, but the browser will save "userid" and "passwd" once, and never again since they don't change. You could eliminate the "person" field if you don't really need it. In that case, all you want is the "mypswd" field, which could change in some way known to the user of your web-page.

You can use JQuery, select the item by id:

$("input#Password").attr("autocomplete","off");

Or select the item by type:

$("input[type='password']").attr("autocomplete","off");

Or also:

You can use pure Javascript:

document.getElementById('Password').autocomplete = 'off';

seeing as autocomplete=off is deprecated, I suggest a more recent solution.

Set your password field to a normal text field, and mask your input with "discs" using CSS. the code should look like this:

<input type="text" class="myPassword" /> 

input .myPassword{
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Please note that this may not work propely on firefox browsers, and an additional walkaround is needed. Read more about it here :https://stackoverflow.com/a/49304708/5477548.

The solution was taken from this link, but to comply with SO "no-hotlinks" i summarized it here.

I tried the following and it seems that works to any browser:

<input id="passfld" type="text" autocomplete="off" />

<script type="text/javascript">
    $(function(){  
        var passElem = $("input#passfld");
        passElem.focus(function() { 
            passElem.prop("type", "password");                                             
        });
    });
</script>

This way is much more safer than using timeout techniques, because it guaranties that the input field will yield to password when the user focuses it.

In the case of most major browsers, having an input outside of and not connected to any forms whatsoever tricks the browser into thinking there was no submission. In this case, you would have to use pure JS validation for your login and encryption of your passwords would be necessary as well.

Before:

<form action="..."><input type="password"/></form>

After:

<input type="password"/>

you can also use it like following

$('#Password').attr("autocomplete", "off");
setTimeout('$("#Password").val("");', 2000);

seeing as autocomplete=off is deprecated, I suggest a more recent solution.

Set your password field to a normal text field, and mask your input with "discs" using CSS. the code should look like this:

<input type="text" class="myPassword" /> 

input .myPassword{
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Please note that this may not work propely on firefox browsers, and an additional walkaround is needed. Read more about it here :https://stackoverflow.com/a/49304708/5477548.

The solution was taken from this link, but to comply with SO "no-hotlinks" i summarized it here.

I solved in another way. You can try this.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

#another way

 <script type="text/javascript">    
 function setAutoCompleteOFF(tm){
    if(typeof tm =="undefined"){tm=10;}
    try{
    var inputs=$(".auto-complete-off,input[autocomplete=off]"); 
    setTimeout(function(){
        inputs.each(function(){     
            var old_value=$(this).attr("value");            
            var thisobj=$(this);            
            setTimeout(function(){  
                thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
                thisobj.val(old_value);
            },tm);
         });
     },tm); 
    }catch(e){}
  }
 $(function(){                                              
        setAutoCompleteOFF();
    });
</script>

// you need to add attribute autocomplete="off" or you can add class .auto-complete-off into the input box and enjoy

Example:

  <input id="passfld" type="password" autocomplete="off" />
    OR
  <input id="passfld" class="auto-complete-off" type="password"  />

Here's the best answer, and the easiest! Put an extra password field in front of your input field and set the display:none , so that when the browser fills it in, it does it in an input that you don't care about.

Change this:

<input type="password" name="password" size="25" class="input" id="password" value="">

to this:

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">

I've found the following works on Firefox and Chrome.

<form ... > <!-- more stuff -->
<input name="person" type="text" size=30 value="">
<input name="mypswd" type="password" size=6 value="" autocomplete="off">
<input name="userid" type="text" value="security" style="display:none">
<input name="passwd" type="password" value="faker" style="display:none">
<!-- more stuff --> </form>

All of these are within the forms section. "person" and "mypswd" are what you want, but the browser will save "userid" and "passwd" once, and never again since they don't change. You could eliminate the "person" field if you don't really need it. In that case, all you want is the "mypswd" field, which could change in some way known to the user of your web-page.

The only way I can get firefox, edge, and Internet explorer to turn off autocomplete is to add autocomplete="false" in my form statement like:

  <form action="postingpage.php" autocomplete="false" method="post">

and I have to add the autocomplete="off" to my form input and change the type to text Like:

     <input type="text" autocomplete="off">

It seems that this html code needs to be standardized with the browsers. the form type = password should be revised so that it overrides browser settings. The only issue I have is that I lost my input masking. But on the bright side the annoying "this site is not secure" is not showing up in firefox.

for me, its not a big deal since the user is already authenticated and its my change user name and password portion of it

Read also this answer where he is using this easy solution that works everywhere (see also the fix for Safari mobile):

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

As for security issues, here is what a security consultant will tell you on the whole field issue (this is from an actual independent security audit):

HTML Autocomplete Enabled – Password fields in HTML forms have autocomplete enabled. Most browsers have a facility to remember user credentials entered into HTML forms.

Relative Risk: Low

Affected Systems/Devices: o https://*******/

I also agree this should cover any field that contains truly private data. I feel that it is alright to force a person to always type their credit card information, CVC code, passwords, usernames, etc whenever that site is going to access anything that should be kept secure [universally or by legal compliance requirements]. For example: purchase forms, bank/credit sites, tax sites, medical data, federal, nuclear, etc - not Sites like Stack Overflow or Facebook.

Other types of sites - e.g. TimeStar Online for clocking in and out of work - it's stupid, since I always use the same PC/account at work, that I can't save the credentials on that site - strangely enough I can on my Android but not on an iPad. Even shared PCs this wouldn't be too bad since clocking in/out for someone else really doesn't do anything but annoy your supervisor. (They have to go in and delete the erroneous punches - just choose not to save on public PCs).

you can also use it like following

$('#Password').attr("autocomplete", "off");
setTimeout('$("#Password").val("");', 2000);

As for security issues, here is what a security consultant will tell you on the whole field issue (this is from an actual independent security audit):

HTML Autocomplete Enabled – Password fields in HTML forms have autocomplete enabled. Most browsers have a facility to remember user credentials entered into HTML forms.

Relative Risk: Low

Affected Systems/Devices: o https://*******/

I also agree this should cover any field that contains truly private data. I feel that it is alright to force a person to always type their credit card information, CVC code, passwords, usernames, etc whenever that site is going to access anything that should be kept secure [universally or by legal compliance requirements]. For example: purchase forms, bank/credit sites, tax sites, medical data, federal, nuclear, etc - not Sites like Stack Overflow or Facebook.

Other types of sites - e.g. TimeStar Online for clocking in and out of work - it's stupid, since I always use the same PC/account at work, that I can't save the credentials on that site - strangely enough I can on my Android but not on an iPad. Even shared PCs this wouldn't be too bad since clocking in/out for someone else really doesn't do anything but annoy your supervisor. (They have to go in and delete the erroneous punches - just choose not to save on public PCs).

I tried the following and it seems that works to any browser:

<input id="passfld" type="text" autocomplete="off" />

<script type="text/javascript">
    $(function(){  
        var passElem = $("input#passfld");
        passElem.focus(function() { 
            passElem.prop("type", "password");                                             
        });
    });
</script>

This way is much more safer than using timeout techniques, because it guaranties that the input field will yield to password when the user focuses it.

<input type="password" autocomplete="off" />

I'd just like to add that as a user I think this is very annoying and a hassle to overcome. I strongly recommend against using this as it will more than likely aggravate your users.

Passwords are already not stored in the MRU, and correctly configured public machines will not even save the username.

<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Here you go.

Read also this answer where he is using this easy solution that works everywhere (see also the fix for Safari mobile):

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

Here's the best answer, and the easiest! Put an extra password field in front of your input field and set the display:none , so that when the browser fills it in, it does it in an input that you don't care about.

Change this:

<input type="password" name="password" size="25" class="input" id="password" value="">

to this:

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">

<input type="password" autocomplete="off" />

I'd just like to add that as a user I think this is very annoying and a hassle to overcome. I strongly recommend against using this as it will more than likely aggravate your users.

Passwords are already not stored in the MRU, and correctly configured public machines will not even save the username.

In the case of most major browsers, having an input outside of and not connected to any forms whatsoever tricks the browser into thinking there was no submission. In this case, you would have to use pure JS validation for your login and encryption of your passwords would be necessary as well.

Before:

<form action="..."><input type="password"/></form>

After:

<input type="password"/>

<input type="password" autocomplete="off" />

I'd just like to add that as a user I think this is very annoying and a hassle to overcome. I strongly recommend against using this as it will more than likely aggravate your users.

Passwords are already not stored in the MRU, and correctly configured public machines will not even save the username.