Password entry field length = 0 for autocomplete (android chrome)

Question

I run a placeholder above the input field on the login page. On an Android device (4.3), it automatically fills in the user and password fields when the page loads. Using Javascript, I can get the length of the authorized user input, but when I run the same function on the password input, it returns 0.

Even when I debug using Chrome Remote Debugging, it shows that the password input field is "" with length = 0. And yet android chrome shows the password in the field.

In any case, everything is around. I just need to determine when the input field is not empty, so I can hide the placeholder.

$(document).ready(function(){ setTimeout(function () { alert($("#password").val().length); checkPlaceholder("#password"); }, 1000); }); function checkPlaceholder(x) { if($(x).val().length === 0){ $(x).parent().find(".input_placeholder").removeClass("placeholder_hide"); } else { $(x).parent().find(".input_placeholder").addClass("placeholder_hide"); } } 

Answer 1

Well, I had a similar problem. And I did not find any information about this. But I noticed that the Chrome Chrome password input field with a real value after the user touches the body of the document. After this password field, the event 'change' generated, and if you check its value, it will be filled. Unfortunately, Chrome doesn't work if we fire the events 'click'/'touch'/'focus' etc. , only hardware shutdown.

So, I solved the problem by adding an event listener for the 'change' event on password field. For you, the solution might be something like this:

 $(document).ready(function() { // leave this code for other browsers setTimeout(function () { alert($("#password").val().length); checkPlaceholder("#password"); }, 1000); // android Chrome fix $('#password').change(checkPlaceholder.bind(null, '#password')); }); 

But, as I wrote earlier, this code will execute ONLY after the user touches the page.