empty input value in forms with auto complete

Asked

Viewed 186 times

0

I’m having a problem that’s keeping me awake, it’s a little bug, I think, that’s complicated both to debug and to explain.

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

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

The strange thing is: if the page is reloaded with F5, I can get it back. if the page is reloaded by clicking on the url and pressing Enter, no. In this case, value is only available if I click any part of the page or press any keyboard key.

This looks a lot like some bug in Chrome.

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

EDIT: My goal is to add a style to the 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, no longer being a placeholder and turning a title on top of 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();
});
jquery html google-chrome self-cmplete

  • and if you use the autocomplete="off"

  • Unfortunately, Chrome ignores autocomplete=off, even if used in the Form tag.

  • I tried to use a suggested hack in another post to duplicate inputs with the same name, hiding the first input "fake", but as I use Aspx for the pages, I have no control over the attribute Name

  • I ended up discovering that it really is a Chrome BUG. In firefox, when the page is loaded, it calls the Change event for both the email field and password. In Chrome, it only calls the Change event for the email. However, when you click anywhere on the screen, only then it calls the change event for the password.

  • 1

    I had to create a "hack" only for the login page, to avoid this problem (see my answer below, because I can not paste code in the comments)

1 answer

0


I ended up discovering that it really is a Chrome BUG. In firefox, when the page is loaded, it calls the Change event for both the email field and password. In Chrome, it only calls the Change event for the email. However, when you click anywhere on the screen, only then it calls the change event for the password.

I had to create a "hack" only 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");
    }
}

Browser other questions tagged jquery html google-chrome self-cmplete

You are not signed in. Login or sign up in order to post.