CODEWITHSUNDEEP
javascriptandroidjquerygoogle-chromeautofill
Jason
Jason

Reputation: 59

Password input field length = 0 on autofill (android chrome)

I am running a placeholder over an input field on a login page. On android (4.3) it auto fills the user and password fields on page load. Using Javascript I am able to get the length of the autofilled 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 show that the password input field is "" with a length = 0. Yet android chrome shows the password in the field.

Is there anyway around this. I just need detect 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");
    }
}

Upvotes: 5

Views: 960

Answers (1)

Denis S
Denis S

Reputation: 1

Well, I had similar problem. And I didn't find any information about this. But I noticed, that Android Chrome fill password field with real value after user's tap on document body. After that password field generate 'change' event, and if you check it's value it will be filled. Unfortunately Chrome doesn't work the same way if we trigger 'click'/'touch'/'focus' etc. events, only hardware tap.

So, I resolved my problem by adding event listener for 'change' event on password field. For you solution can be something like:

$(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 before, that code will execute ONLY after user tap on page.

Upvotes: 0

Related Questions