1,105,633 Community Members

change input type in js

Member Avatar
hwoarang69
Posting Pro
572 posts since Feb 2012
Reputation Points: -4 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 9 [?]
 
0
 

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.

Member Avatar
JorgeM
IT Addict
6,431 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
1
 

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/

Member Avatar
hwoarang69
Posting Pro
572 posts since Feb 2012
Reputation Points: -4 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 9 [?]
 
0
 

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

Question Answered as of 1 Year Ago by JorgeM
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article