Question

I’m working on a label fade when the user enters text into an input/textarea. It is working well so far, but I can’t figure out a good way to check if the input/textarea has an existing value when it is loaded, so I can automatically hide the label.

The inputs/textareas are being loaded using .load(), which is why I’m using $(document), instead of defining the selector directly.

Here is an example showing the problem Im trying to overcome. Any help would be greatly appreciated. Also if you have any suggestions how I could wrap this functionality into a plugin/function that would be extra helpful. Thanks!

http://jsfiddle.net/skyros/FTXc3/

And pseudo code if you dont want to go to jsfiddle

//JQUERY
$(document).on('click', 'label', function() {
  $(this).next().focus();
});

$(document).on('focus', 'input,textarea', function() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 0.25) : $(this).prev('label').fadeTo(100, 0).hide();
});

$(document).on('blur', 'input,textarea', function() {
  var label = (this.value === "") ? $(this).prev('label').show().fadeTo(100, 1) : $(this).prev('label').fadeTo(100, 0).hide();
});

$(document).on('keypress', 'input, textarea', function() {
  var label = $(this).prev('label').hide();
});​

Answer 1

One way is to use the filter function to get elements with length > 0 then hide the label

$(function(){ // on dom ready
    $('label').filter(function(){
        // return labels that have siblings with input val > 0
        return $.trim($(this).siblings('input[type=text]').val()).length > 0;
    }).hide(); // hide those labels that are returned 
    // or do whatever you want to do with those labels here
});

http://jsfiddle.net/wirey00/XwGa6/