Link to home
Start Free TrialLog in
Avatar of nickinthooz
nickinthoozFlag for United States of America

asked on

Hide Password until user clicks it, then reveal it.

Hi,

Here's what I'm doing.  I'm making a client list for my company that includes the clients domain, username, and password (see attachment).  When I display the list, I would like to display asterisks, but when the user clicks on the password, it's revealed.
User generated imageOr something similar.  The reason for this is when all the domains are listed, I don't want someone looking over shoulders to get the login creeds.  Anyhow, does anyone know how I would be able to accomplish this?

Javascript, php, jquery...anything should be fine.
Avatar of Gary
Gary
Flag of Ireland image

Place the actual value in a custom eg
<input type="text" value="" data-value="123456" class="password">

With jquery
$(".password").focus(function(){
    $(this).val($(this).attr("data-value"))
})
$('.password').focusout(function() {
  $(this).val("")
});
test page : http://jsfiddle.net/azZpq/
<input type="password" id="pwd1" name="password" />
<input type="text" id="pwd2" />

Open in new window

$(document).ready(function() {
    $("#pwd1").focus(function() {
        $(this).hide();
        $("#pwd2").val($(this).val()).show();
        setTimeout(function() { $("#pwd2").focus(); },200);
    })
    $("#pwd2").blur(function() {
        $(this).hide();
        $("#pwd1").val($(this).val()).show();
    })
})

Open in new window

Avatar of nickinthooz

ASKER

Is there a way to do this without using an input?  Make it use a div?
ASKER CERTIFIED SOLUTION
Avatar of Jagadishwor Dulal
Jagadishwor Dulal
Flag of Nepal image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You can but it makes it harder to know when it doesn't have focus - why not an input?
jagadishdulal solution is so simple it's embarrassing.
only for aesthetic reasons
Style the input however you like.
Yeah, that's what I'm doing, and yes jagadishdulal, that is amazingly simple.  Makes me hate life for not thinking of it.
don't forget to try it on all browsers...
I haven't done any cross-browser testing (common sense tells me it will be just fine), and I gotta say that elegant and enlightening solutions like this are one of the reasons I love being part of Experts-Exchange.

+1 to @jagadishdulal !