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 engineering leader with a successful record in building, nurturing, managing, and leading a multi-disciplinary, diverse, and distributed team of engineers and managers developing and delivering solutions. Professionally, he oversees solution design-development-delivery, cloud transition, IT strategies, technical and organizational leadership, TOM, IT governance, digital transformation, Innovation, stakeholder management, management consulting, and technology vision & strategy. When he's not working, he enjoys reading about and working with new technologies, and trying to get his friends to make the move to new web trends. He has written, co-written, and published many articles in international journals, on various domains/topics including Open Source, Networks, Low-Code, Mobile Technologies, and Business Intelligence. He made a proposal for an information management system at the University level during his 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.