Clear password field

Question

<input name="e_password" id="e_password" type="password" autocomplete="off" />

The above is a password field which for some reason, is automatically filled only in Mozilla (not in Chrome and IE11). Obviously it keeps the value field from previous trials. I tried so much to clear this field. The only way I can manage it, is through the following:

$(document).ready(function(){      
  $('input:text').val(''); 
});

Unfortunately, the above resets all the other text fields inside the form which is undesirable. Also,

$(document).ready(function(){
    $('input:password').val('');
}); 

does not work! Moreover, I tried this:

<div class="abc">   
   <input name="e_password" id="e_password" type="password" autocomplete="off" />
</div>

$(document).ready(function(){
    $('.abc input:text').val('');    
});

Nor, this works... Of course, I tried the obvious:

$('#e_password').val(''); 

which also did not work. I repeat that the problem exists only in Mozilla. What else may I do?

Thank you

Sharynshashlik

It is unbelievable;however, none of the following proposed solutions works! Of course it is a matter of Mozilla passwords and I want to overcome it with code. For the moment it seems impossible. – Sharynshashlik

I cannot still understand why the only thing that works is $('input:text').val(''); and how to make it το affect only "e_password"... – Sharynshashlik

One more detail. If trying to assign something different from "", e.g. $('#e_password').val('12q'); everything works fine!!! – Sharynshashlik

Answer 1

I found it!!

setTimeout(function(){ $('#e_password').val('');}, 50);

Hopefully, the above works. However, I cannot give a satisfactory explanation why this small delay solves the problem...Most probably, it is a Mozilla bug.

Sharynshashlik

the new coorect answer is "autocomplete="new-password" provided by @Vitalicus – Raze

Answer 2

document.getElementById("e_password").value = "";

or

$('input[type="password"]#e_password').val('');

Hailstorm

that didn't work in Mozilla, the only way is to delay. I think the autocomplete feature of Firefox works even after the document is ready – Raze

Answer 3

Chrome ignore autocomplete="off"

Use autocomplete="new-password" in input

<input type="password" autocomplete="new-password">

https://bugs.chromium.org/p/chromium/issues/detail?id=587466

Stalkinghorse

This seems to be the correct answer. See also: The autocomplete attribute and login fields. It is working for me. – Uncanonical

Answer 4

$("#e_password").val('') works for me in firefox. Can you try with this ?

$("#e_password").attr("value","")

Ganef

Answer 5

Pure Javascript:

document.getElementById('e_password').value = '';

Or using jQuery:

$('#e_password').attr('value','');

Farthermost

Answer 6

autocomplete="off" must be set for form element not input

<form autocomplete="off">
    ....
</form>

Frasquito

Answer 7

I may be wrong but I guess it is not a code problem at all !!. It may be the saved passwords in the browser. For example when you open up the page in chrome , just check out the top right of the omnibox and you can click the cross to delete the saved password for that page. I guessed this because you say it comes only in mozilla and not other browsers.

Kruter

Answer 8

This is an old question, but I did it a way that is not mentioned yet. This was after trying almost all suggestions in this thread (except the timeout as I don't want to add any unnecessary delays in my page).

The problem I saw was when the browser autofilled the password field, the value is not being set. So

$('#password').val("");

will not work, because the value is already "".

So I did it in 2 lines.

$('#password').val("a");
$('#password').val("");

I set the value to something so I could clear it out. Then the browser autofill field is cleared.

Hope this helps someone out there!

Kristankriste

Answer 9

FF is using "change" event when auto-filling (at least in v51).

try something like

// if your input is in html
$(document).ready(function(){ 

/* // if you create input from code like this
$("body").html('<input class="password" type="password" id="e_password">').promise().done(function(){
*/

   $("#e_password").on("change", function() { //append this event
         $("#e_password").off("change"); //optional, depends on your code
         $("#e_password").val(''); //clear
         $("#e_password").attr("value",""); //clear #2 (just to be sure)
    });  

});

Putter

Answer 10

Chrome ignore autocomplete="off"

Use autocomplete="new-password" in input

Mccrea

Answer 11

Use reset() Most of the browsers support it.

Usage:

document.getElementById("password").reset();

Pissed