How display text in password field

Question

I have the password field on page. I want to display text \"Enter password\" on screen before entering password but on focus when user enter password it should go back to passwo

Answer 1

If you don't want to use a plugin (like the one in SLaks' answer), you have to either position a label above the password field (what the plugin does), or hide the password field and show a text input in its place until it gets the focus.

Internet Explorer doesn't let you change an input's type from "password" to "text", so any solution that tries to do that won't work in IE.

Here's an example that works in at least IE7 (it should work in IE6, but I haven't tried it), Chrome, and Firefox.

jQuery(function($) {
    function make_label_field(password_input, label) {
        var new_input = document.createElement("input");
        new_input.type = "text";
        new_input.size = password_input.size;
        new_input.className = password_input.className;
        new_input.setAttribute("style", password_input.getAttribute("style"));
        // Copy any additional properties you need. You may want to add a class
        // to style the label differently

        new_input.value = label;

        $(new_input).focus(function() {
            $(this).hide();
            $(password_input).show().focus();
        });
        return new_input;
    }

    $("input[type=password]").each(function() {
        $(this).after(make_label_field(this, "Enter password")).hide();
    }).blur(function() {
        if (this.value == "") {
            $(this).hide().next().show();
        }
    });
});