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:
Porém, quando o navegador preenche com o e-mail e senha salvos, o span
não é ajustado:
Como posso resolver isso?
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