I have a input type text for user to change their email & password in account setting page.
How can stop Chrome auto fill the input.
Chrome remember the input data from log in page and it auto fill in account setting page.
Chrome auto fill the input change my email & password in account setting page
We are no longer dependent on hacks for this. You can set autocomplete to new-password and it will work as intended.
<input type="password" name="pwd" autocomplete="new-password">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete
Are you explicitly setting the values as blank? For example:
<input type="text" name="textfield" value="">
That should stop browsers putting data in where it shouldn't. Alternatively, you can add the autocomplete attribute to the form tag:
<form autocomplete="off" ...></form>
Solution 1:
Putting 2 lines of code under under <form ..> tag does the trick.
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Solution 2: It removes "name" and "id" attributes from elements and assigns them back after 1ms. Put this in document get ready.
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
Solution 3: Tested in Chrome 60.0.3112.101
<input type="password" name="pwd" autocomplete="new-password">
This issue still exists as of Version 55.0.2883.87 m. (on Windows 10)
Solutions like setting the autocomplete attribute on a form
or adding fake input fields and removing the name attribute before submit do not work anymore, since Chrome ignores or instantly auto-completes them on removal.
The only way to get it currently to work as intended is to set the autocomplete attribute to "new-password"
<input type="text" name="text" autocomplete="new-password">
even on non password type inputs.
The latest version of Chrome (46.0.2490.86) appears to have changed behaviour again. This time, AutoFill has nothing to do with autocomplete or readonly or other workarounds suggested here (and on these bug reports https://code.google.com/p/chromium/issues/detail?id=468153, https://bugs.chromium.org/p/chromium/issues/detail?id=587466)
Rather, AutoFill now looks at the label next to the input box and generates an AutoFill based on that (as well as the id and name). A big clue is how AutoFill can actually fill multiple fields at once (e.g. Street, Suburb and State). It appears to be using several techniques (label, name, id) to discern the spatial relationship between fields.
So a workaround is to insert junk text into the label inside a hidden span...
S<span style="display:none">_</span>uburb:
...and also obfuscate/remove the id and name. This was the only thing that prevented Suburb AutoFill for me.
Unfortunately autocomplete="off" didn't work for me (anymore). So here is my solution:
First read and then remove "name" and "id" attributes from elements. Then, after 1ms, set these attributes back again with values read before. For me it works :)
<form autocomplete="off"><br />
<input type="text" name="username" id="username" /><br />
<input type="password" name="password" id="password" /><br />
</form>
<pre>
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function(){
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function(){
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
</pre>
By setting autocomplete="new-password" , it works. Before testing, you clear browsing data first
Chrome ignores both autocomplete="anything" and hidden fields. A HTML/CSS workaround would be using an absolute positioned password field before the real one:
<input type="text" name="username" required>
<input style="visibility: hidden; position: absolute; left:-99999px" type="password" name="fakepasswordfieldtoturnoffautocomplete">
<input type="password" name="password" required>
EDIT:
As referred in multiple other answers in other duplicate questions, the most elegant working solution so far is this:
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Almost jumped out the window trying to solve this... seems Google now ignores Autocomplete ON and OFF. I had used on older fix (such as fake hidden password fields - which also no longer worked). Based on the living standard spec - you need to use an auto-fill tokens instead. You must use them in the appropriate use-case context. Hope this is helpful.
Try hidden password element
<form>
<input type="text" name="fakeusername" class="fake-autofill-fields"/>
<input type="password" name="fakepassword" class="fake-autofill-fields"/>
...
...
</form>
<script>
$(document).ready(function () {
$(".fake-autofill-fields").show();
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
}, 1);
});
</script>
Enter a value of ' ' (a blank space) for the username field and Chrome doesn't autopopulate username or password.
<input type = 'text' value = ' ' name = 'username' />
If you're ever populating the username with a user-entered value, code to enter a ' ' if there's no user-entered value.
Try this:
<div id="form_container">
<input type="text" name="username" autocomplete="off">
<input type="password" name="pwd" autocomplete="off">
<input tytep="submit" name="login" id="login" value="Log In">
</div>`
The jquery code:
jQuery("#login").click(function(){
jQuery("#form_container").wrap('<form method="post"></form>');
jQuery("form").submit();
});
If you don't wrap your input fields into a form, then the chrome's autofill won't come up.
When you click on the submit button, just frap the fields around the form and fire a submit() on the form.
I had a similar problem. After all of the attempts failed. I tried this hack of setting
type = "search"
instead of text. Even though its not a pretty hack. It does not cause any issues in majority of cases. type search is no different than text as of now.
This works:
<form autocomplete="off" ...></form>
Tested on Chrome 56.0.2924.87 (64-bit)
