How can you swap an input text field to a password area on focus in JQuery?

Question

I would like to display "password" as text in the password area, and when focused the box should become empty and allow normal password (starred out) input from the user.

Currently I use the following method. Initially I display a text field showing password, when focused it is removed and replaced with a password field. Here is the jQuery:

$(document).ready(function() {
    $("#password").focus( function() {
        $("#pwd").html('<input type="password" id="password" name="password" value="" />');
        $("#password").focus();
    });
});

This works on Firefox and Chrome but fails in IE 8 (and presumably other IE's) as the focus call fails for some reason (maybe the DOM isn't ready?).

A demo is available on jsbin.

Any ideas?

Answer 1

You could try the watermarker plugin. I don't know if it works in IE8.