Here we are going to see the custom placeholder using jQuery like HTML5 placeholder. In normal HTML5 placeholders its hard to change the style of the textbox caption style. If you want to change the text box style in normal placeholder mode and the user entering mode means we need to change the class of the textbox when the user action is made on that. This simple `placeholder` jQuery extend will give you the way to resolve it. Here we have created two CSS classes for change the textbox style in normal mode and focus mode. It can be easily customized as per you wished style.

jQuery-custom-placeholder-by-asif18

Following is the simple extend function for custom placeholder.

jQuery.fn.extend({
	placeholder : function(){
		this.each(function() {
			$(this).addClass('placeholder_click');
			var tagName = $(this).get(0).tagName;
			$(this).focus(function() {				  
				if(tagName == 'SELECT'){
					$(this).removeClass('placeholder_click');	
				}
				else{
					if ($(this).val() == $(this).prop('defaultValue')) {
					  $(this).val('');
					  $(this).removeClass('placeholder_click');	
					  var ChkPassword = $(this).hasClass("password");
						if(ChkPassword == true){
							 $(this).get(0).type='password';
						}
					}
				}
			});
			$(this).blur(function() {
				if ($(this).val() == '') {
					$(this).addClass('placeholder_click');
					$(this).val($(this).prop('defaultValue'));
					var ChkPassword = $(this).hasClass("password");
					if(ChkPassword == true){
						 $(this).get(0).type='text';
					}
				} 
			});
	   });
	}
});

Just copy paste the above function and use it like a normal jQuery like below,

$(".input").placeholder();

it can be used in the password fields also. Copy and paste the above extend function in your document and use like$('SELECTOR').placeholder(), and for the form validations using this simple jQuery placeholder click the demo link for live demonstration of working file. Download the .zip file below for download the working file with examples.

NOTE: For password fields add a class name called password for every password fields like in the downloadable file.

Post a comment



Mohamed Asif Am a web developer i love web designing, web developing. for any tutorials mail me at asif18[at]asif18.com