Categories
Javascript PHP

jQuery Watermark shadow effect on Input box

How to create watermark / shadow effect on Input type textbox? How to get watermark using jQuery ?

using jQuery watermark on input box
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.

'Coz sharing is caring

By Swatantra Kumar

Swatantra is an Open Source evangelist, a technologist and researcher. Professionally, he does software development, software architecture, server administration and project management. When he's not writing software, he enjoys building web entities and servers, reading about and working with new technologies, and trying to get his friends to make the move to open source software. He's written, co-written and published many articles in international journals, on various domains/topics including Open Source, Networks, Computer Organization, Mobile Technologies, and Business Intelligence. He made a proposal for an information management system at University level during graduation days.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.