0

Estou tendo um problema que está me tirando o sono, é um pequeno bug, acredito, que é complicado tanto para debugar quanto para explicar.

Possuo um formulário de login em uma página do meu sistema, e um código em que aplica estilos dependendo do valor inserido nos campos de formulário.

O problema é que, quando a página é carregada, no chrome, com a opção de salvar a senha, o formulário já é carregado com os campos de usuário e senha preenchidos, porém, não consigo recuperar o value do campo da senha.

O mais estranho: se a página for recarregada com F5, consigo recuperar o valor. se a página for recarregada clicando na url e pressionando Enter, não. Neste caso, o value só fica disponível se eu clicar em qualquer parte da página ou pressionar qualquer tecla do teclado.

Isso me parece muito com algum bug no chrome.

ps: Possuo um evento onfocusin em todos os campos, ao carregar, o campo de email dispara este evento e consigo recuperar seu valor. O campo de senha chama o evento onfocusin quando carrego a página e clico em qualquer lugar da página.

EDIT: Meu objetivo é adicionar um estilo à labels dos elementos inputs para que eu crie o efeito do Android, onde a label é um placeholder, mas quando se clica no campo, ou se ele possuir algum valor, o label sobe, deixando de ser placeholder e virando um titulo em cima do 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();
});
5
  • e se voce usar o autocomplete="off"
    – David
    10/08/2017 às 11:12
  • Infelizmente, o chrome ignora o autocomplete=off, mesmo se usado na tag Form. 10/08/2017 às 13:16
  • Tentei usar um Hack sugerido em outro post para duplicar os inputs com o mesmo Name, escondendo o primeiro input "fake", mas como utilizo Aspx para as páginas, não tenho controle sobre o atributo Name 10/08/2017 às 13:17
  • Acabei por descobrir que realmente é um BUG do Chrome. No firefox, quando a página é carregada, ele chama o evento Change tanto para o campo email quanto senha. Já no Chrome, ele chama o evento Change apenas para o email. Porém, ao clicar em qualquer parte da tela, só ai ele chama o evento change para a senha. 10/08/2017 às 13:18
  • 1
    Tive que criar um "hack" somente para a página de login, para evitar esse problema (veja minha resposta abaixo, pois não consigo colar código nos comentários) 10/08/2017 às 13:19

1 Resposta 1

0

Acabei por descobrir que realmente é um BUG do Chrome. No firefox, quando a página é carregada, ele chama o evento Change tanto para o campo email quanto senha. Já no Chrome, ele chama o evento Change apenas para o email. Porém, ao clicar em qualquer parte da tela, só ai ele chama o evento change para a senha.

Tive que criar um "hack" somente para a página de login, para evitar esse problema

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");
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .