jQuery Watermark shadow effect on Input box

  • Sumo

How to create watermark / shadow effect on Input type textbox using jQuery ?
It’s really very simple using jQuery. There is no need to write long Javascript function to check the value and populating default text onblur/onfocus/onclick/onchange… etc.
Just follow three steps and it’s done.

1) Create textbox in your HTML file

<input type="text" name="zipCode" id="zipCode" value="Enter Zip Code" />

2) Create CSS class for Dim effect (watermarking theme)

.watermarkEffectText {
    color : #9B9B9B;
}

3) Javascript code

$( document ).ready(function() {
	// apply class
	$("#zipCode").addClass("watermarkEffectText")
	// set default value (If you've not assigned in HTML, else skip this line) 
	// assigning in HTML doesn't wait for DOM load, and reflects immediately
	.val("Enter Zip Code")
	// on gaining focus
	.focus(function() {
		if( $(this).val() == "Enter Zip Code" ) { // remove default value
			// remove class and value
			$(this).removeClass("watermarkEffectText").val("");
		}
	})
	// on loosing focus
	.blur(function() {
		if($(this).val() == "") {
			// set default value with watermark effect
			$(this).val("Enter Zip Code").addClass("watermarkEffectText");
		}
	});
});

Leave a Reply

Your email address will not be published. Required fields are marked *