How to create watermark / shadow effect on Input type textbox? How to get watermark using jQuery ?
You can add default text on form elements that look like watermarks or work as placeholders. Using jQuery and bit of CSS rules, you can easily achieve the watermark effect. This is very handy if you want to prevent unwanted information to be sent to the server, as can happen with the default watermark text. 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.
A simple jQuery example to show you how to implement a watermark text effect on an input field.
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");
}
});
});
1, 2, 3… it’s as simple to achieve watermark effect.
