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  http://uniquemethod.com/html5-placeholder-text-jquery-fallback-with-modernizr.  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.

$(".placeholder").watermark();

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.

 <label>Namelabel>
 <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.

Enjoy~!.
Labels:

Comments

Post a Comment

Popular posts from this blog

JavaScript Scope

In this blog post we will dig deeper into various aspects of JavaScript scope.  This is a pretty interesting topic  and also a topic which confuses many beginning JavaScript programmers. Understanding JavaScript scope helps you write bug free programs (hmm.. atleast helps your troubleshoot things easily) Scope control the visibility and lifetimes of variables and parameters.  This is important from the perspective of avoiding naming collisions and provides memory management service. Unlike other languages, JavaScript does not have block level scope.  For e.g. take for instance the following piece of c# code. public void Main () { int a = 5; if (true) { int b = 10; } // This will throw compile time error as b is not defined // and not within the scope of function Main(); Console.WriteLine(b); } If you write the same code in JavaScript, then the value of 'b' will be available outside the 'if' block. The reason for this is JavaScript does no...
27 comments
Read more

JavaScript Function Spaghetti Code

In this post we will have a look at the spaghetti code created by functions and how to avoid them. First lets quickly go through why this is a cause of concern. Problems with Function Spaghetti Code Variables/ functions are added to the global scope The code is not modular There's potential for duplicate function names Difficult to maintain No namespace sense. Let's take for example the following set of functions and check whats the issue with them. // file1.js function saveState(obj) {     // write code here to saveState of some object     alert('file1 saveState'); } // file2.js (remote team or some third party scripts) function saveState(obj, obj2) {      // further code...     alert('file2 saveState"); } Now the problem here is if your application is using saveState() then the execution of saveState() which one to call is determined by the script loading.  The later script overrides same functions already defin...
9 comments
Read more

Building a jQuery PPT like presentation - Part 1

This is more a video post and it covers how to build a simple PPT like presentation using jQuery. This is very elementary at this stage and we will incrementally add features to this. The first version is a very rough one and cover elementary ideas and proof of concept. Hope you like this. Do please note the video doesn't have any voice as I am still improving my recording skills (and also having a bad throat since couple of days). In any case, I do think action speaks louder that words.. (though this is just an excuse). The URL for the source code is at http://jsbin.com/ovaxop/edit#source
8 comments
Read more