Jquery - Identify automatic text

Question

I am using Jquery to identify when the text box is text in the text box, thus:

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

It works perfectly, like this:

However, when the browser fills in with the saved email and password, the span is not adjusted:

How can I fix this?

Answer 1

This problem of autocomplete is a little complicated to solve because it varies from browser to browser and also in different versions of these.

Chrome for example does not indicate that you are filling in the fields when you read the page

A possible solution will be the following:

$(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);

});

Basically we are creating a timer that runs every 1 second (can change time to your liking) and checks the field.

An option is also to cancel the timer after a few seconds so it is not constantly running:

clearInterval(verificador);

I’m still working on it

I hope I’ve helped.

Regards

Answer 2

I don’t understand the "automatically puts the text". Otherwise, it takes care?

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