I have some simple jQuery working to hide labels for text inputs on focus, keyup and blur if (value !== ''). I am using replacement tokens in my forms to fill in a default value based on the currently logged in user. I need to hide the labels if the default value gets prepopulated. I can't get the right function to hide the labels if a default value populates the form. (I've installed jQuery update to get the .on() function.) Here's the script in my js file:
(function ($, Drupal, window, document, undefined) {
Drupal.behaviors.my_custom_behavior = {
attach: function(context, settings) {
/*------ Hide labels when user interacts with forms ------*/
$(".form-item input", context).on({
focus: function() {
$(this).prev('label').fadeOut('fast');
},
keyup: function() {
$(this).prev('label').fadeOut('fast');
},
blur: function() {
if($(this).val() !== "") {
$(this).prev('label').hide('fast');
} else {
$(this).prev('label').fadeIn('fast');
}
}
});
/*------ Hide label if has default value on page load --------*/
$(document).ready(function(){
if($('.form-item input').val() !== "") {
$(this).prev('label').hide();
}
});
}
};
})(jQuery, Drupal, this, this.document);
Drupal outputs
<div class="form-item form-type-textfield form-item-field-email-address-und-0-email">
<label for="edit-field-email-address-und-0-email--2">Email Address <span class="form-required" title="This field is required.">*</span></label>
<input type="text" id="edit-field-email-address-und-0-email--2" name="field_email_address[und][0][email]" value="[email protected]" size="60" maxlength="128" class="form-text required">
</div>