-
-
Save runspired/b9fdf1fa74fc9fb4554418dea35718fe to your computer and use it in GitHub Desktop.
| <!-- | |
| <form autocomplete="off"> will turn off autocomplete for the form in most browsers | |
| except for username/email/password fields | |
| --> | |
| <form autocomplete="off"> | |
| <!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields --> | |
| <input id="username" style="display:none" type="text" name="fakeusernameremembered"> | |
| <input id="password" style="display:none" type="password" name="fakepasswordremembered"> | |
| <!-- | |
| <input autocomplete="nope"> turns off autocomplete on many other browsers that don't respect | |
| the form's "off", but not for "password" inputs. | |
| --> | |
| <input id="real-username" type="text" autocomplete="nope"> | |
| <!-- | |
| <input type="password" autocomplete="new-password" will turn it off for passwords everywhere | |
| --> | |
| <input id="real-password" type="password" autocomplete="new-password"> | |
| </form> |
None of the above solution worked for me in Chrome for Mac; in particular an input field generated by the "typeahead.js" library (that was not a password field) insisted to display the password suggestion when the field gets empty. At last I found that by simply putting the field inside a
tag makes it work, with no need to specify autocomplete=off in the field itself.
With the reason for using the type="password" in mind: why not using type="text" and give it a font-family which makes the text unreadable? Like dots, or what ever.
<style>
input.key {
-webkit-text-security: disc;
}
</style>
<script>
var tagArr = document.getElementsByTagName("form");
for (let i = 0; i < tagArr.length; i++) {
tagArr[i].autocomplete = 'off';
}
var tagArrInput = document.getElementsByTagName("input");
for (let i = 0; i < tagArrInput.length; i++) {
tagArrInput[i].autocomplete = 'off';
if (tagArrInput[i].type == "password") {
tagArrInput[i].type = "text";
tagArrInput[i].classList.add("key");
}
console.log('name=', tagArrInput[i].name);
}
</script>
For everyone who may need it there is a library that was created to resolve this problem
https://github.com/noppa/text-security
This solution works for me well (I adapted it for jss)
{
password: {
fontFamily: 'text-security-disc',
WebkitTextSecurity: 'disc',
'&::placeholder': {
fontFamily: theme.typography.fontFamily,
}
}
}
One thing that worked for me was to use httprequest to register users, I had to remove the password elements before calling location.href. No idea if it works in chrome. Browsers getting smarter so I guess it is just a question of time before this no longer works.
That worked for me and my friend (@amandasantiagu), we are using the latest Chrome version 94.0.4606.81
We used it in React and it worked perfectly
<form autocomplete="off" style="100%">
<input autocomplete="false" type="search" style=" overflow: hidden; display: none " />
<input autocomplete="new-password">Your input info here </input>
</form>
use 'novalidate' on the form element
https://www.w3schools.com/tags/att_form_novalidate.asp
help me for this type for special password
If you want to prevent the browser's password manager from autofilling, check out @krozamdev/masked-password. It helps hide password inputs from autofill detection.
For now only found MS Edge Version 135.0.3179.98 (Official build) (arm64) to ignore autocomplete="off", so had to use autocomplete="new-password"
The autocomplete="off" attribute should prevent most browsers from autofilling the field, but some browsers may still autofill due to their internal heuristics. To further prevent autofill, you can try using a non-standard value for the autocomplete attribute, such as autocomplete="new-password", a non-standard value that browsers typically do not recognize for autofill purposes. This effectively disables the browser's autofill behavior for the input field.
I have tried multiple approaches mentioned above including disabling autocomplete (autocomplete="new-password", autocomplete="off", autocomplete="some wierd name",... etc, using randomised input names, syncing custom masked fields to hidden inputs, injecting fake username fields, clearing inputs on load, and applying readonly+on-focus tricks.
All seem to fail to consistently suppress Chrome’s aggressive behaviour on password fields to fix this particular issue.
NOTE: I have tested these changes on firefox, safari, arc and they seem to do the job, it is on chrome where they draw the line 😄
ref:
Oh, that's good to know - hopefully Firefox also fixes and rejects this shitty behaviour. Making things both harder and less secure for users is evil and kinda stupid.
That was great, thanks