1.11M Members

change input type in js


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.


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.


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

Question Answered as of 1 Year Ago by JorgeM
Isn't it about time forums rewarded their contributors?

Earn rewards points for helping others. Gain kudos. Cash out. Get better answers yourself.

It's as simple as contributing editorial or replying to discussions labeled or OP Kudos

This question has already been solved: Start a new discussion instead
Start New Discussion
Tags Related to this Article