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 html tag for my system, and code in jquery 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();
});