I am in the process of developing a WordPress website and utilizing Contact Form 7 for building forms.
My goal is to implement a custom animation for the input labels. When there is no user interaction, the label is positioned inside the input field. Upon focusing on the input, the label smoothly slides up to make space for the input value. If the input field is left empty upon focus out, the label should slide back to its original position; otherwise, it should remain in place.
The animation itself is fairly straightforward and has been successfully implemented. However, I am encountering an issue with checking whether the input is empty or not. Below is the jQuery code snippet that I am currently using:
jQuery(document).ready(function($) {
var cinput = $('.placeholder-animation input.animate-label');
var clabel = $('.placeholder-animation span.custom-label');
cinput.each(function() {
if(cinput.val() === "") {
console.log('Up!');
cinput.focus(function() { clabel.addClass('up'); }).focusout(function() { clabel.removeClass('up'); });
} else {
clabel.addClass('up');
console.log('Always up!');
}
});
})
Despite my efforts, I am facing a persisting issue where even after entering a value in the input field, the label incorrectly slides back as if the input was still empty. I have tried various solutions but none have yielded positive results...
Any assistance would be greatly appreciated! Thank you in advance!