HTML5 and CSS3, Second Edition

html5_placeholder/index.html

<scriptsrc='javascripts/modernizr.js'></script>

In javascripts/fallbacks.js we declare a function that invokes the jQuery Placeholder

plug-in:

html5_placeholder/javascripts/fallbacks.js

varapplyPlaceholders=function(){

$("input").placeholder();

}

Then we use Modernizr to detect placeholder support, load the plug-in, and

invoke the fallback:

html5_placeholder/javascripts/fallbacks.js

Modernizr.load(

{

test:Modernizr.placeholder,

nope:"javascripts/jquery.placeholder.js",

callback:function(url,result){

if(!result){

applyPlaceholders();

}

}

}

);

Now we have a pretty decent solution that makes placeholder text a viable

option for your web apps, no matter what browser you use.

Placeholders are a great way to give users hints about the way we’d like them

to enter data. But we may want to give a little more guidance than that, by

making sure the users fill in fields the correct way.

report erratum • discuss

Providing Hints with Placeholder Text • 53

Download from Wow! eBook <www.wowebook.com>