Previously we discussed about how to clear input values on focus and set them back on blur. Today we are going to do the same for placeholder field.

For those who doesn’t know what placeholder is. Placeholder is a new attribute of HTML 5 that can be used as short hint for the input value if there is no default value given to the Input field.

The placeholder value is shown when the input field is empty and disappears when someone types in it. So, if the field disappears on its own then why use a function.

Take a look at this example. As you can see if the user clicks on it, the value does not disappear and at moment you start typing it disappears. This may confuse some users to think that it has to deleted first. Here comes the role of our function.

Simply copy and paste this function and you are good to go.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery("input").each(function() {
		jQuery(this).data('holder',jQuery(this).attr('placeholder'));

			jQuery(this).focusin(function(){
    			jQuery(this).attr('placeholder','');
			});
			
			jQuery(this).focusout(function(){
    			jQuery(this).attr('placeholder',jQuery(this).data('holder'));
			});
	});
});
</script>

Click here for working example

Note:The placeholder attribute is supported in all major browsers, except Internet Explorer.