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?