Input placeholder attribute it is great little thing in HTML5.

David Walsh said: „The placeholder attribute shows text in a field until the field is focused upon, then hides the text.  You’ve seen this technique a billion times with JavaScript, but native HTML5 support is even better!”

So it’s really handy for all web coders.

But everything will be fine if it will always work.
off course we have some problem here because IE is really stupid browser – so HTML5 is not very welcome in Internet Explorer.

Placeholder attribute wont work in any IE (IE 6 > IE 9), so we need workaround.

We tried use some tricks from „webdesignerwall” – we need „Mordernizr” and jQuery

if(!Modernizr.input.placeholder){
    	$("input").each(function(){
	    	if($(this).val()=="" && $(this).attr("placeholder")!=""){
		    	$(this).val($(this).attr("placeholder"));
		    	$(this).focus(function(){
			    	if($(this).val()==$(this).attr("placeholder"))
			    		$(this).val("");
			    });
		    	$(this).blur(function(){
		    		if($(this).val()=="") $(this).val($(this).attr("placeholder"));
		    	});
	    	}
    	});
    }

It’s almost ok, but we still have problem with
<input type=”password” placeholder=”Password” />
- input should display word „Password” not ********

So we need to do old trick – using jQuery dynamically change type of input from „password” do „text”

NO! This is not good idea
IE won’t allow you to change the type of input element for security reasons.

Hmmm, ok, we will do it another way:

var browserName = navigator.appName;
 var browserVer = getInternetExplorerVersion();

	 if (browserName == 'Microsoft Internet Explorer' &&
            (browserVer == '6' || browserVer == '7' || browserVer == '8' || browserVer == '9')) {

		 $('input[type=password]').each(function(){
			 $(this).addClass('passwordBackgroundField');
			 $(this).attr('placeholder',"");
		 })
		 $('.passField').focusin(function(){

			 $(this).removeClass('passwordBackgroundField');
		 })
		 $('.passField').focusout(function(){
			 if ($(this).val()=="" || $(this).val()==null){
				 $(this).addClass('passwordBackgroundField');
			 }
		 })
	 }

I hope it helped with „password” input

function getInternetExplorerVersion() in next post about detecting browser type and version.

good luck.