JQuery - Identify automatic text

Navigation
0

I'm using JQuery to identify when the text box is text in the text box, like this:

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,whenthebrowserfillsinwiththesavedemailandpassword,spanisnotset:

How can I resolve this?

    
asked by anonymous 08.04.2018 / 17:04

2 answers

1

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

The chrome for example does not indicate that you are filling the fields when you read the page

One possible solution will be as follows: 

$(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 the time to your liking) and checks the field.

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

clearInterval(verificador);

I'm still investigating the subject

I hope I have helped.

Greetings

    
11.04.2018 / 00:47
0

I did not understand " put the text automatically ". No more, does that solve? 

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);
  });
});
    
08.04.2018 / 17:15
Click on Checkbox component and enable EditText Identify a specific word in a C ++ String, is there any function ready for it? Or just the nail itself?