iam doing it so that it inside input field it should say "Password". then if user start type in than it should put chars ****.

 html file
 <input type="password" name="password" id="login_password" class="login_field" value=""/>

 js file
 /*** login page - password field ***/  

var password = 'Password';
$('#login_password').replaceWith('<input type="text" value="" name="password" id="login_password" class="login_field">');
$('#login_password').css('color', 'gray');
$('#login_password').attr('value', password).focusin(function()

    $(this).css('color', 'black');
    if($(this).val() == password)
        $(this).replaceWith('<input type="password" value="" name="password" id="login_password" class="login_field">');
    if($(this).val() == '')
        $(this).attr('value', password);

not sure if this is the right way to do this task. there is also a small bug. when i foucs on input filed i have to click two times.

Edited by hwoarang69

5 Years
Discussion Span
Last Post by hwoarang69

If you do a search for "input password watermark", you'll find plenty of examples on this topic. The challange here is to have plain text in place, then when you focus in on the input element, switch over to having the input element with a type of "password" instead of type of "text".

Here is a jsfiddle example i came across.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.