Posted By

errkk on 03/22/11

Tagged

html5

Versions (?)

Last Edited at 03/22/11 09:19pm

Statistics

Viewed 586 times

Favorited by 1 user(s)

Related snippets

Placeholder Text Support for crap browsers

/ Published in: JavaScript

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

Highlighted TextExpand

$('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'});
	    }
	});
    }

}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.