Chrome Autofill/Autocomplete no value for password
This seems to be a bug in Chrome. When Chrome auto-fills a password on an initial page load (but not a refresh), the value appears in the form field on-screen, but querying passwordField.value
in Javascript returns an empty string. If you depend on seeing that value in Javascript, this prevents you from doing so. Once the user does any other action on the page, such as clicking anywhere on the page, the value suddenly becomes visible to Javascript.
I'm not actually 100% sure if this is a bug, or if there is a security reason for doing this such as preventing a hidden frame from stealing your password by tricking the browser into filling it in.
A workaround that we have used is to detect the background color change that Chrome makes to fields that it has auto-filled. Chrome colors the background of auto-filled fields yellow, and this change is always visible to Javascript even when the value is not. Detecting this in Javascript lets us know that the field was auto-filled with a value, even though we see the value as blank in Javascript. In our case, we have a login form where the submit button is not enabled until you fill in something in the password field, and detecting either a value or the auto-fill background-color is good enough to determine that something is in the field. We can then enable the submit button, and clicking the button (or pressing enter) instantly makes the password field value visible to Javascript because interacting with the page fixes the problem, so we can proceed normally from there.
Chrome autofill overlapping floating label
It seems that this is unfixable because of the stubbornness of chromium decision makers, despite the seemingly general confusion and frustration of web devs since 2014 and other browsers behaving differently.
This is one of the many chromium bug tickets that were closed as WontFix.
Here are some others.
Edit
Via this article, I saw:-webkit-autofil
and did some testing, and it seems to kind of work like I wanted. Let's just hope that it'll be working consistently over time.
Disable Google Chrome Autocomplete / Autofill / Suggestion
Chrome no longer supports autocomplete="off"
. Use autocomplete="new-password"
instead.
Mozilla link
From the documentation:
For this reason, many modern browsers do not support
autocomplete="off"
for login fields:If a site sets
autocomplete="off"
for username and password input fields,
then the browser will still offer to remember this login, and if the
user agrees, the browser will autofill those fields the next time the
user visits the page. This is the behavior in Firefox (since version
38), Google Chrome (since 34), and Internet Explorer (since version
11).If an author would like to prevent the autofilling of password fields
in user management pages where a user can specify a new password for
someone other than themself,autocomplete="new-password"
should be
specified, though support for this has not been implemented in all
browsers yet.
Another solution is using autocomplete="false"
. Here are a few links to other SO questions that may help:
SO - Disabling Chrome Autofill
SO - Chrome Browser Ignoring AutoComplete=Off
SO - Chrome 63+ Autocomplete Bypass
Related Topics
How to Detect a Textbox's Content Has Changed
How to Get Current Value of Rxjs Subject or Observable
How to Split the Ng-Repeat Data with Three Columns Using Bootstrap
How to Validate Date with Format "Mm/Dd/Yyyy" in JavaScript
How to Convert a Currency String to a Double with JavaScript
How to Pass the Value (Not the Reference) of a Js Variable to a Function
Convert Base64 to Image in JavaScript/Jquery
What Is the Minimum Valid JSON
Get Mouse Wheel Events in Jquery
How to Download a File Using Window.Fetch
What Does the "|" (Single Pipe) Do in JavaScript
Addeventlistener Not Working in IE8
How Does Basic Object/Function Chaining Work in JavaScript
Implementing Pagination in Mongodb
5Xx or 4Xx Error with "No 'Access-Control-Allow-Origin' Header Is Present"
JavaScript Checking for Null VS. Undefined and Difference Between == and ===