Return to Snippet

Revision: 43367
at March 22, 2011 21:19 by errkk


Initial Code
$('document').ready(function(){
    $('input').each(function(count,element){
	if( $( element ).attr('placeholder') ){
	search_text(element);
	}
    });
});


function search_text(e)
{
    // Function to detect placeholder support where Modernizr isnt available
    var supports_placeholder = function()
    {
	var i = document.createElement('input');
        return 'placeholder' in i;
    }

    // Check jQuery is available
    if( typeof( $ ) != 'function' )
	return false;

    // Check for placeholder support
    if( typeof( Modernizr ) != 'object' && supports_placeholder() == false ){
	return false;
    }else if( Modernizr.input.placeholder ){
	return false;
    }

    // Check if an object is passed directly (like from an each loop), or by an ID reference
    var input = false;
    if( typeof(e) == 'object' ){
	// whole object passed
	input = e;
    }else{
	// reference to object passed
	input = document.getElementById(e);
    }

    if( input ){

	var search_advice_text = $(input).attr('placeholder');

	if( $(input).val().length == 0 ){
	    $(input).val( search_advice_text ).css({'color':'#ccc'});
	}
	$(input).focus(function(){
	    if( $(this).val().length == 0 || $(this).val() == search_advice_text ){
		$(this).val( '' ).css({'color':'#444'});
	    }
	}).blur(function(){
	    if( $(this).val().length == 0 ){
		$(this).val( search_advice_text ).css({'color':'#ccc'});
	    }
	});
    }

}

Initial URL


Initial Description
This function emulates support for placeholder text on form elements,  run it inside a loop or call it by passing in a specific id reference

Initial Title
Placeholder Text Support for crap browsers

Initial Tags
html5

Initial Language
JavaScript