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 password type

EDIT: I am using Jquery as well so any small jquery solution will do

Solution 1

[Latest revisision to include IE support]
^{Update for IE9: Version 9 of IE allows the change of the type attribute for input elements of type text/password back and forth}

As mentioned in the comments (and verified) the previous examples did not work in IE as it does not allow the change of the type by script ... Here is a workaround, which replaces the element with another back-and-forth (code assumes you start with a text box)

var element = document.getElementById('mysearch');

var text_to_show = 'Enter Password';

element.value = text_to_show; // set the message for the first time

element.onfocus = function(){ 
                       if (this.value == text_to_show) 
                           {
                             var newElement = convertType(this);
                            newElement.value = '';
                            setTimeout(function(){document.getElementById(newElement.id).focus()},100);
                           }
                       }
element.onblur = function(){ 
                       if (this.value == '') 
                          {
                            var newElement = convertType(this);
                            newElement.value = text_to_show;
                          }
                    }


function convertType(elem)
{
    var input = document.createElement('input');
    input.id = elem.id;
    input.value = elem.value;
    input.onfocus = elem.onfocus;
    input.onblur = elem.onblur;
    input.className = elem.className;
    if (elem.type == 'text' )
      { input.type = 'password'; }
    else
      { input.type = 'text'; }

    elem.parentNode.replaceChild(input, elem);         
  return input;
}

[update]

scrap the original answer, i missed the part that you want to keep the field as password (with hidden contents)

Revised answer:

var element = document.getElementById('mysearch');

var text_to_show = 'Enter Password';
element.type="text"; // set the type to text for the first time
element.value = text_to_show; // set the message for the first time
element.onfocus = function(){ 
                       if (this.value == text_to_show) 
                           {
                            this.type="password";
                            this.value = '';
                           }
                       }
element.onblur = function(){ 
                       if (this.value == '') 
                          {
                            this.type="text";
                            this.value = text_to_show;
                          }
                       }

[original answer]

var element = document.getElementById('inputID'); 
//  inputID should be the ID given to the password element

var text_to_show = 'Enter Password'
element.value = text_to_show;
element.onfocus = function(){ if (this.value == text_to_show) this.value = '';}
element.onblur = function(){ if (this.value == '') this.value = text_to_show;}

Solution 2

You can either give it an image background with the text Enter Password that you change dynamically using javascript (ideally by just removing a CSS class),

<input type="password" class="enter-password"> or
<input type="password" style="background-image:url('enter-password.png');">

or place a fake input that you replace with javascript for a password input.

I'm not sure how well it would cross browser to change the type of input on the fly.

document.getElementsByTagName("input")[0].type = "text" /* change a hidden field to text*/ works on Firefox, but I wouldn't rely on it working well on IE without testing.

Solution 3

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();
        }
    });
});

Solution 4

You can use this jQuery plugin, which supports password fields.

View more solutions