getfluid
3/13/2018 - 8:01 PM

Form Input Labels Animate

Animates labels disguised as placeholders.

//////
// Form labels move up when typing into inputs
//////

// Elements to be tested against
var formElement = $('.wpcf7-form-control-wrap').children();

// Determine if an input is clean or dirty
function determineCleanliness(formInput) {
  var value;
  // Run through each form input to determine if it has been filled in
  $.each(formInput, function(i, el) {

    value = $(el).val()

    // Toggle class depending on value
    if (value !== '' || $(el).is(':focus')) {
      $(el).parent().siblings('label').addClass('move-up');
    } else {
      $(el).parent().siblings('label').removeClass('move-up');
    }

  });
}

// Get field cleanliness on page load
determineCleanliness(formElement);

// Bind to specific events to determine field cleanliness
$(formElement).on('keydown focus blur', function() {
  determineCleanliness($(this));
});