change input type in js

[hwoarang69]

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">');
        $('#login_password').fousin();
    }
}).focusout(function()
{
    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.

[JorgeM]

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.
http://jsfiddle.net/jquerybyexample/TwTt9/

[hwoarang69]

thanks. that example was perfect for what i was doing.