Learning jQuery

There are plenty of jQuery plugins available to show watermark for textbox. But none of these plugin when used for password type textbox will show the watermark in plain text. It will be displayed in asterisk signs. See below image.

But I needed to show watermark for password text box as plain text. After some thinking and applying a trick, I was able to achieve it. The trick is, use 2 text boxes.

1. First textbox will show watermark in plain text.
2. Second textbox is your password textbox.

All I need to do is to show and hide these textbox based on the focus and blur event. Simple, isn't it?

Let's take an example.

Declare two textbox, one is simple and other one with password mode.

<input type="text" class="greyText" id="txtPlainPassword"/>
<input type="password" id="txtPassword" />

Now when my document.ready() function gets called, hide the txtPassword text box and show the txtPlainPassword text box.

$("#txtPlainPassword").show();
$("#txtPassword").hide();

Now when the focus moves to the txtplainPassword text box, hide this text box and show the txtPassword text box.

$("#txtPlainPassword").focus(function() {
  $(this).hide();  
  $("#txtPassword").show();
  $("#txtPassword").focus();
});

Now on blur event of txtPassword, first check whether anything entered or not. If not entered then txtPlainPassword text box should be displayed again. If anything was entered then there is no need to show the watermark.

$("#txtPassword").blur(function() {
    if($(this).val().length == 0)
    {
       $(this).hide();  
       $("#txtPlainPassword").show();
    }      
});

That's it. Just run the page and test it. Simple and easy to implement.

Feel free to contact me for any help related to jQuery. I will gladly help you.