Skip to main content

Quickly build a jQuery watermark plugin with HTML5 and modenizr support

In this edition of blog post, we will quickly build a jQuery watermark pluigin for input controls.  This is an adapted post from  I have quickly refactored the code as a jQuery plugin.  The author in the above blog post has done a great job of summarizing the concept.

A watermark or placeholder text is an indicator by input controls as to what data could be enter in the field.  It's kind of a hint to user entering the data.

HTML5 has native support for watermark in the form of "placeholder" attribute.  Any text that you put in the placeholder attribute will show as watermark in modern browsers.

For browsers that doesn't yet support HTML5, jQuery comes to the rescue.  Also, we are using Modernizr for feature detection.

Modernizr is an excellent feature detection library, with which we can detect for support of modern standard by browsers.

You can see a working version here

You can use this plugin, in the following manner.


The above jQuery code finds all elements with a class of "placeholder" and applies the watermark() function to it.

The sample input element is shown below.

 <input class="placeholder" placeholder="Enter your full name." type="text" />

Do note the above input element has a class of  "placeholder" and also a placeholder attribute which is set to "Enter you full name".  This placeholder text will be shown as watermark in the input element.  Also, HTML5 browser directly understands and render this placeholder attribute appropriately.

Rather than bloating this post, I have added appropriate comment in the jsfiddle.  In case anyone needs further clarifications, please drop a comment.



Popular posts from this blog

JavaScript - The this keyword

"this" is one of the most misunderstood construct in JavaScript.  To understand this first lets go through how to create a construction function in JavaScript.  A constructor function is a function which is used to create instances of objects in JavaScript.

You define a constructor function using the same notation that you use to define a normal JavaScript function.  The convention to follow is to capitalize the first letter of the function name.

This requirement is not enforced by the JavaScript language but it is a generally accepted practice and there are many benefits which we will shortly discuss.

Let's define a constructor function to hold our menu information.

function Menu() { }
So, in the above snippet you have a constructor function named Menu defined. At present this function doesn't do anything good.

Let's see how to invoke this function

var menu = new Menu();
Let's add some public properties to this function.
function Menu() { this.menuName = &q…

C# Abstract Class Vs. Interface - Building a simple rule engine

In this video post we will briefly go over the difference between abstract class and an interface.  This is one of the most confusing concepts for beginners to understand. In the following video we will walkthrough step by step through these concepts and build a simple RuleEngine as a demo.

Please do note that this rule engine is not fully functional and production ready, but is demonstrated to make the concepts clear.

Please leave your constructive comments and also suggestions about future videos, if you like to have on any specific topics.