Dynamic input type change - password to text

Dynamic input type change - password to text

Hi all,

I am trying to setup a password input that fist shows: "Password". When the user selects it (or focuses on it), it clears and becomes a password input. If the person, clears the password and leaves focus (blurs), the word password appears again.

I did some research on this first. There is this article that requires creation of two inputs (hide one, show the other). I also read this article.

Without confusing everyone, I am trying to do this simple and in a smart way:

HTML BODY

<input type="text" id="password" name="password" class="password" value="Password" />


jQuery Script


$(document).ready(function() {

   $('input[type=text]:.password').focus(function() {

      $(this).replaceWith('<input type="password" id="password" name="password" class="password" value="" />');

      // I think this is working fine until here

   });


   $('input[type=password]:.password').blur(function() {   // this is not being called

      if ($(this).val() == '') {

         $(this).replaceWith('<input type="text" id="password" name="password" class="password" value="" />');

      }

   });

});


How do I make the new input that I created be recognized when it blurs? I know I can do: $(this).replaceWith(...).blur(...stuff...), but that will iterate forever.

Help?