Watermark text for Password Field

I have one password field on page. I want to display watermark text "Enter password" in password field on screen before en开发者_Python百科tering password it shows the text as password type. How we can resolve this issue by using javascript?

The easiest way is going to be to use a jQuery plugin that allows watermarking of password fields. I came up with this plugin doing a quick google search.

If you don't want to use a jQuery plugin, what you're going to need is 2 html inputs, one visible and one hidden. The hidden one contains the actual value you're wanting to pass back to the server while the visible one is the one you manipulate with javascript and the user interacts with. The next part is to manipulate the 2 inputs together. Here's the important parts that I can think of to code for:

• When your visible password input is empty, change it's type to text and display the watermark but leave the hidden input empty.
• If a user gives it focus, hide the watermark and switch back to password.
• As they type, copy the value into the hidden field.
• If they leave the input and there's no text, switch the type back to text and show the watermark again.

Try either the plugin or coding the javascript yourself and let me know how it goes.

So the below code is a simple jQuery mask for a regular input field. But this won't work for a password field because the letters are masked! So that makes me think of two ways this could be extended. One would be to write a masking function yourself. So use a regular input field, but mask characters as they are entered. The other would be to overlay a regular textbox on the password field and then either hide it or change the z-order when clicked in. I know that you just said in comments you aren't using jQuery, but I am leaving this up for others. Sorry I don't have code for your use case!

/* Newsletter Sign Up Functions*/
    /* Toggle field descriptions as they are clicked in and out of */
    //set default input values because Firefox is stupid and doesn't reset them
    $("#newsletterform input[name=first]").val('First Name');
    $("#newsletterform input[name=last]").val('Last Name');
    $("#newsletterform input[name=email]").val('E-mail Address');

    //store default input values
    $("#newsletterForm input:text").each(function() {
        $.data(this, "initialval", $(this).val());
    });
    //clear values on focus
    $("#newsletterForm input:text").focus(function() {
        if ($.data(this, "initialval") == $(this).val()) { $(this).val(""); }
    });
    //restore value on lost focus
    $("#newsletterForm input:text").blur(function() {
        if ($(this).val() == "") { $(this).val($.data(this, "initialval")); }
    });
    /* End toggle field descriptions */

If you only need to support newer browsers you can use the placeholder attribute on the input.

<input type="password" placeholder="Insert Password" />

Or if you need to set it in script just do

input.placeholder =​​​​​​​ "Insert Password";

See http://jsfiddle.net/xECqY/.

You should definitely try a jQuery watermark function, ex. http://code.google.com/p/jwatermark/

This jQuery plugin is actively maintained and handles new HTML5 input fields: http://code.google.com/p/jquery-watermark/