After update chrome to version 72.0.3626.109, tag autocomplete off stopped work,
I'm trying use autocomplete='somestring', but not work.
Follow the image:
I tried autocomplete="false", autocomplete="off" and plugin for disable autofill, use jQuery to add attribute autocomplete, but not worked!
Sorry for my english.
I struggled with something very similar and found this question while I was searching for answers, here's how I fixed it.
My situation: I have an input field for searching, and somewhere else I had a username and password field. Chrome recently started putting the autocompleted username in the search field.
Apparently, Chrome ignores autocomplete="off" now, and goes by the string value to try to determine what type of data to autocomplete. So if you have a search box, you should put autocomplete="search" so Chrome won't put the username in there, for example.
When I first noticed a long time ago autocomplete="off" was being ignored for my search box, I switched to autocomplete="search" and that worked. Now, Chrome started putting the username in the search box again with the latest update.
The way to fix this, if your situation is similar, is to put the autocomplete field for all of your text inputs with a string describing what it is.
BEFORE:
<input id='search' type='text' autocomplete="search">
And somewhere else on the page...
<input id='login_username' type='text'>
<input id='login_password' type='password'>
AFTER
<input id='search' type='text' autocomplete="search">
And somewhere else on the page...
<input id='login_username' type='text' autocomplete="username">
<input id='login_password' type='password' autocomplete="password">
Additionally, putting the inputs in a form also affects the autocomplete, but I didn't have too much time to mess with that and I needed a quick fix to get my site working properly again. Hope this helps someone.
My Problem
I must have turned on google to autofill for a login on my site, however it is trying to now autofill that login data whenever I want to edit my account info or edit another users account info (as an admin). It fills in my data in weird spots. The issue seems to be that Chrome auto fills any input with a type of password and then whatever the input before it is (see image below). If I put a select box before it then it won't autofill.
I obviously don't want to have to go through and delete the password/phone every time I edit a user. I also don't want my users to have to do that when they are editing their own account. How do I remove it?
What I have tried (with no success)
Adding autocomplete="off" to the form as well as both the phone and password inputs.
Adding value="" to both inputs
Changing the name= of the password input. I tried pw, pass, password, and cheese (incase chrome was picking up the name)
Adding autocomplete="off" through the jquery .attr
What I have found
I found that Google may be intentionally ignoring autocomplete: Google ignoring autocomplete
I found another user posting a similar question but the solution is not working for me: Disable Chrome Autofill
I also found another user doing a work around involving creating a hidden password field which would take the google autocomplete, I'd prefer a cleaner solution as in my case I would also need a hidden input above it to avoid both from autofilling: Disable autofill in chrome without disabling autocomplete
In HTML5 with autocomplete attribute there is a new property called "new-password" which we can use to over come this issue. Following works for me.
<input id="userPassword" type="password" autocomplete="new-password">
current-password :
Allow the browser or password manager to enter the current password for the site. This provides more information than "on" does, since it lets the browser or password manager know to use the currently-known password for the site in the field, rather than a new one.
new-password :
Allow the browser or password manager to automatically enter the new password for the site. This might be automatically generated based on the other attributes of the control, or might simply tell the browser to present a "suggested new password" widget of some kind.
Refer: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
This can be solved without hacks, but it is not necessarily intuitive. There are two weird decisions that Chrome makes. First, Chrome ignores autocomplete="off" in its parsing, and second, Chrome assumes the field that comes before a password field must be a username/email field, and should be autocompleted as such.
There are ways around this though that leverage the HTML5 autocomplete attribute spec.
As you will see in the link below, there are standard values for the attribute autocomplete. To avoid having Chrome assuming the field before a password is an email field, use either one of the official values (e.g., tel for a phone number), or make up a value that does not exist on the list, but is also not off or false.
Google suggests you use one of the standard values with new- prepended to the value, e.g., autocomplete="new-tel". If you want a password field to not autocomplete, you can use autocomplete="new-password", for instance.
While technically you could of course make the attribute something random without context to the same effect (e.g. autocomplete="blahblahblah"), I recommend the new- prefix as it helps give any future developer working on your code some context of what you're accomplishing with this attribute.
Ref: https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute
Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.
Fix: browser autofill in by readonly-mode and set writable on focus
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
(focus = at mouse click and tabbing through fields)
Update:
Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
Live Demo https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
Explanation: Browser auto fills credentials to wrong text field?
#Samir: Chrome auto fills any input with a type of password and then whatever the input before it is
Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it,
This readonly-fix above worked for me.
fake inputs dont work
autocomplete="off" / "new-password" / "false" and so on dont work, chrome ingores them all
Solution that worked for us:
<script>
$(document).ready(function(){
//put readonly attribute on all fields and mark those, that already readonly
$.each($('input'), function(i, el){
if ($(el).attr('readonly')) {
$(el).attr('shouldbereadonly', 'true');
} else {
$(el).attr('readonly', 'readonly');
}
});
//Remove unnecessary readonly attributes in timeout
setTimeout(function(){
$.each($('input'), function(i, el){
if (!$(el).attr('shouldbereadonly')) {
$(el).attr('readonly', null);
}
});
}, 500);
});
</script>
Following #Rob Porter feedback, in my case this was happening on a single input field (a PIN field), where password was being suggested and other field in the form was being populated.
Solved the issue by adding a dummy input field right before the PIN input as such:
<input id="pin-dummy" name="pin-dummy" type="text" style="opacity:0%;width:1px;height:1px;position:absolute;left:0px;top:0px" />
<input id="pin" name="pin" type="password" autocomplete="new-password" />
Chrome has updates, fake inputs are not working any more.
Chrome seems to remember everything after an success 200 net connection, whatever input[type=password] is activated on the screen will be remembered.
I've tried dynamically set the inputs to type text, clearing the contents, they don't always work, especially when there is a button to get verify code before submitting the form.
Finally, I figured it out:
listen to inputs focus and blur events,
everytime blur:
var psw1 = $('input[name=psw1]').val();
$('input[name=psw1]').val((new Array(psw1.length)).join('*'));
$('input[name=psw1]').attr('type', 'text');
everytime focus:
$('input[name=psw1]').attr('type', 'password');
$('input[name=psw1]').val(psw1)
the side effect is obvious, input's content would change every focus and blur event, but this method prevent chrome from remembering password perfectly.
Opacity
We fixed this by adding a field and setting its opacity to 0. so chrome still think there is a field an filling it.
width: 0px !important;
height: 0px !important;
opacity: 0 !important;
I noticed that Chrome / FF browser ALWAYS auto-filled the text input immediately preceding the password field. So the simplest solution was to add a "dummy" input:
I handle this problem with some simple js
<input type="password" name="password" class="autocomplete-off" readonly="readonly">
// autocomplete
$('input.autocomplete-off').click(function () {
$(this).removeAttr('readonly');
});
On my side the situation have been resolve by surronding my input with a form autocomplete="off".
<form autocomplete="off">
<input placeholder="Ville" type="text" class="w3-input town-input" type="text" />
</form>
Working fine !!!!
I'm having a problem with a form with two password fields. I have a form with three input fields: name (text), id (password), and PIN (password). My browser stores the password from PIN & autocompletes it back into the id field next time I visit the page. The PIN field is initialized empty.
Is there a way to have the ID number stored as the saved password & PIN left blank? I've tried adding an "autocomplete=off" attribute in the PIN input field with no effect.
FWIW, I'm using Firefox & trying not to use javascript.
Any suggestions (or documentation on how autocomplete/password saving actually works inside any browser) would be appreciated.
Kent
If autocomplete="off" is not working, you should add <input type="password" style="display: none;"/> before any password input. It will hold completed password and will not interfere with anything.
<input name="password" type="password" autocomplete="off"> should do it in firefox.
See this answer: Is autocomplete="off" compatible with all modern browsers?
Did you put the off in quotes?
I'm developing a website. I'm using a single-page web-app style, so all of the different parts of the site are AJAX'd into index.php. When a user logs in and tells Firefox to remember his username and password, all input boxes on the site get auto-filled with that username and password. This is a problem on the form to change a password. How can i prevent Firefox from automatically filling out these fields? I already tried giving them different names and ids.
Edit: Someone has already asked this. Thanks Joel Coohorn.
From Mozilla's documentation
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.cgi">
[...]
</form>
http://developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion
The autocomplete="off" method doesn't work for me. I realized firefox was injecting the saved password in the first password field it encountered, so the solution that worked for me was to create a dummy password field before the password update field and hide it. Like so:
<input type="password" style="display: none;" />
<input type="password" name="password_update" />
Have you tried adding the autocomplete="off" attribute in the input tag? Not sure if it'll work, but it is worth a try.
are all your input boxes set to type=password? That would do it. One of the things you can do, and I'm not at all sure that this is the best answer is to leave input box as an input type and just use javascript and onkeydown event to place stars in the input box instead of having the browser render it. Firefox won't pre-fill that.
As an aside, I have had to work on single-page web-apps and I absolutely hate it. Why would you want to take away the user's ability to bookmark pages? To use the back button?
Adding to this answer https://stackoverflow.com/a/30897967/1333247
This is in case you also have a User field in front of the password fields and want to disable autocompletion for it too (e.g. router web config, setting proxy User and Password).
Just create a dummy user field in front of the dummy password field to hide user name autocompletion:
<input type="text" style="display: none;" />
<input type="password" style="display: none;" />
<input type="password" name="password_update" />
Per the docs this is about the Login autocompletion. To disable the normal one (e.g. search terms completion), just use the
autocomplete="off"
attribute on the form or inputs. To disable both you need both, since the attribute won't disable Login autocompletion.
If a user saves the password on the login form, ff3 is putting the saved password in the change password dialoge on the profile page, even though its not the same input name as the login. how can I prevent this?
Try using autocomplete="off" as an attribute of the text box. I've used it in the past to stop credit card details being stored by the browser but i dont know if it works with passwords. e.g. print("<input type="text" name="cc" autocomplete="off" />");
I think that FF autofills fields based on the "name" attribute of the field so that if the password box has the name="password" and the change password box has the same it will fill in the same password in both places.
Try changing the name attribute of one of the boxes.
Some sites have 3 inputs for changing a password, one for re-entering the current password and two for entering the new password. If the re-entering input was first and got auto-filled, it wouldn't be a problem.
Go in tools->page properties->security on the page you wish to modify.