0

Estou usando JQuery para identificar quando a caixa de texto há texto na caixa de texto, assim:

CSS:

.inputtext {
    border: 1px solid lightgrey;

    margin: 0;
    margin-top: 11pt;

    width: 100%;
}

.inputtext:focus {
    border: 1px solid green;
    box-shadow: 0 0 1px green;
}

.inputtext + span {
    font-size: 15pt;
    position: absolute;
    left: 15px;
    top: 18pt;
    color: grey;
    cursor: text;
    transition: all 200ms ease;
}

.inputtext:focus + span {
    font-size: 11pt;
    color: green;
    transform: translate(-10px,-18pt);
}

.inputtyped + span {
    font-size: 11pt;
    transform: translate(-10px,-18pt);
}

HTML:

<label>
    <input type="email" name="email" id="email" class="inputtext" required>
    <span>Email</span>
</label>

JQuery:

function typed() {
    var val = $(this).val();

    if (!val) {
        $(this).removeClass('inputtyped');
    } else {
        $(this).addClass('inputtyped');
    }
}

$(window).on('load', function () {
    $("input.inputtext").each(function (index, element) {
        $(element).change(typed);
        $(element).focus(typed);
        $(element).trigger('change');
    });
});

Funciona perfeitamente, assim:

<code>span</code> dentro do <code>input</code> quando não estiver selecionado e sem texto <code>span</code> fora do <code>input</code> e verde quando estiver selecionado <code>span</code> fora do <code>input</code> quando não estiver selecionado e com texto

Porém, quando o navegador preenche com o e-mail e senha salvos, o span não é ajustado:

<code>span</code> dentro do <code>input</code>, mesmo havendo texto

Como posso resolver isso?

2
  • Cara vc pode resolver isso colocando no HTML autocomplete="off" no input, Nem sempre é a melhor solução, mas as vezes pode te atender... w3schools.com/tags/att_input_autocomplete.asp Faz um teste ai
    – hugocsl
    Commented 8/04/2018 às 16:56
  • @hugocsl pelo que eu entendi e olhei o exemplo, o autocomplete="off" irá desativar o autocomplete que acontece quando você começa a digitar, assim como as IDEs fazem. Não me ajuda nesse caso Commented 8/04/2018 às 17:24

2 Respostas 2

2

Este problema do autocomplete é um pouco complicado de resolver pois varia de browser para browser e também nas diferentes versões destes.

O chrome por exemplo não dá indicação que está a preencher os campos quando lê a página

Uma possível solução será a seguinte:

$(window).on("load", function() {

    //Verifica alterações a cada 1 segundo (1000 millisegundos)
    var verificador = setInterval(function () {

        $("input.inputtext").each(function(index, element) {
        $(element).change(typed);
        $(element).focus(typed);
        $(element).trigger("change");
    });

    }, 1000);

});

Basicamente estamos a criar um temporizador que corre a cada 1 segundo (pode alterar o tempo a seu gosto) e verifica o campo.

Uma opção também é cancelar o temporizador depois alguns segundos para este não estar constantemente a executar:

clearInterval(verificador);

Ainda estou a investigar o assunto

Espero ter ajudado.

Cumprimentos

0

Não entendi o "põe o texto automaticamente". No mais, isso resolve?

function typed() {
  var val = $(this).val();

  if (! val) {
    $(this).removeClass('inputtyped');
  } else {
    $(this).addClass('inputtyped');
  }
}

$(window).on('load', function() {
  $('input.inputtext').each(function(index, element) {
    $(element).on('change', typed);
    $(element).on('focus', typed);

    typed.call(element);
  });
});
5
  • Não resolve pois o typed() usa o selector $(this). "põe o texto automaticamente" se refere a quando o navegador salva o login, então ele preenche os campos de texto automaticamente. Commented 8/04/2018 às 15:41
  • Eu editei a minha resposta. Veja agora. Commented 8/04/2018 às 19:02
  • Ainda não funciona quando eu entro na página, mas se eu recarregá-la ou editar alguma coisa, funciona. Commented 8/04/2018 às 19:47
  • Isso é estranho. Sabe me dizer qual comportamento causa isso? Commented 8/04/2018 às 19:51
  • Não tenho ideia. É como se o $(window).on('load') só ocorresse quando há alguma alteração na tela Commented 8/04/2018 às 20:17

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 .