I’ve found plenty of jQuery plugins to have a watermark for a textbox. However, when the textbox type is password the watermark will be displayed with asterisks instead of plain text.

The trick I found is to use 2 textboxes:

  • 1st Textbox will show the watermark
  • 2nd Textbox is the password textbox

So declare 2 textboxes and set one of them to type password:

<input id="txtPlainPassword" style="color: #ccc;" type="text" /> 
<input id="txtPassword" type="password" />

On the document.ready() function hide the txtPassword box and show the other one

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

On the on blur event of txtPassword check if anything was entered and if not txtPlainPassword should be visible again. If something was entered the watermark doesn’t have to be displayed anymore.

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

And that should do the trick. You can see a demo here and experiment with the code.

facebooktwittergoogle_plusredditpinterestlinkedinmail