empty input value on forms with auto complete

0

I'm having a problem that's making me sleep, it's a little bug, I think, that's complicated both to debug and to explain.

I have a login form on a page tag for my system, and code in that applies styles depending on the value entered in the form fields.

The problem is that when the page loads, in chrome, with the option to save the password, the form is already loaded with the user fields and password filled, however, I can not recover the value of the password field .

The strangest: if the page is reloaded with F5 , I can retrieve the value. if the page is reloaded by clicking on the url and pressing Enter , no. In this case, the value is only available if I click anywhere on the page or press any key on the keyboard.

This seems a lot like some chrome bug.

ps: I have a onfocusin event in all fields, when loading, the email field triggers this event and I can recover its value. The password field calls the onfocusin event when I load the page and click anywhere on the page.

EDIT: My goal is to add a style to the labels of input elements so that I create the effect of Android, where the label is a placeholder, but when you click on the field, or if it has some value, the label goes up, ceasing to be placeholder and turning a title over the input.

function toggleInputLabelClass(jEl) {
    if (jEl.val() == "" && !jEl.is(":focus"))
        removeInputLabelClass(jEl)
    else
        addInputLabelClass(jEl)
}

function addInputLabelClass(jEl) {
    $("label[for='" + jEl.attr("id") + "']").addClass("labelUp");
}

function removeInputLabelClass(jEl) {
    $("label[for='" + jEl.attr("id") + "']").removeClass("labelUp");
}

function bindInputLabels() {
    $(":input").each(function () {
        if ($(this).attr("label") == "upper") {
            toggleInputLabelClass($(this));
            $(this).on("keyup focusin focusout change autocompletechange", function () {
                toggleInputLabelClass($(this));
            })
        }
    });
}

$(document).ready(function () {
    bindInputLabels();
});
    
asked by anonymous 10.08.2017 / 13:02

1 answer

0

I finally discovered that it really is a Chrome BUG. In firefox, when the page loads, it calls the Change event for both the email and password fields. As for Chrome, it calls the Change event only for email. However, by clicking anywhere on the screen, it only calls the change event for the password.

I just had to create a hack for the login page to avoid this problem.

function addInputLabelClass(jEl) {
    $("label[for='" + jEl.attr("id") + "']").addClass("labelUp");

    //hack para a tela de login porque o Chrome é louco
    if (jEl.attr("id") == "txtEmail" && jEl.val() != "") {
        $("label[for='txtPass']").addClass("labelUp");
    }
}
    
10.08.2017 / 15:21