Text Input Micro Interaction
/***** CSS: Text Input Micro Interaction *****/
.my-form-text-input .text-input__label {
position: absolute;
transition: all .5s ease;
/* font-size: 18px; */
top: 37px;
}
.focused .text-input__label{
font-size: 14px!important;
top: 0px!important;
}
/***** For Mobile *****/
@media (max-width: 1000px) {
.my-form-text-input .text-input__label {
/* font-size: 18px; */
top: 28px;
}
.focused .text-input__label{
font-size: 12px!important;
}
}
/**** For Tablet *****/
@media (max-width: 1000px) {
/* */
}
//***** Velo Code *****//
$w.onReady(function () {
initFormInputsMicroInterction();
});
function initFormInputsMicroInterction() {
// const allInputs = $w('TextInput');
const allInputs = [$w('#input1'), $w('#input2'), $w('#input3')];
allInputs.forEach(input => {
input.placeholder === '' && input.customClassList.add('my-form-text-input');
input.onFocus(() => {
input.customClassList.add('focused');
});
input.onBlur(() => {
input.value.trim().length === 0 && input.customClassList.remove('focused');
});
});
}