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 *