Question

I have this:

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

… onclick/onfocus, I’d like to change the input type to ‘password’ and value removed, like so:

<input type="password" value="" class="password" />

This doesn’t seem to work:

$('input.password').click(function () {
            $(this).attr('type', 'password');
    });

(See this question for why I want to do this)

---

This works, but just one problem, I need to click twice to be able to type in the pass field:

var passField = $("input.password");
        var passFieldNew = passField.clone();
        $('input.password').click(function () {
            passFieldNew.attr("type", "password");
            passFieldNew.attr("value", "");
            passFieldNew.insertBefore(passField);
            passField.remove();
        });

how do I fix that problem?

Thanks!

Answer 1

You cannot change the type attr while the element is in the DOM, but if you remove it first you can.

The following should work (tested, but only in firebug). The password class will be kept since it’s the same element you insert again.

var $pwd = $('input.password').remove(); // Note, might be better to select on ID
$pwd.attr('type', 'password');
$pwd.val('');
$('#ABC').after($pwd); // Insert it somewhere in the DOM again