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.
ScreenshotOr 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.
LVL 6
nickinthoozAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Jagadishwor DulalConnect With a Mentor Braces MediaCommented:
I hope my example will help towards your solution:

Simply use javascript to change type like:

<input type="password" id="password" name="pass" onBlur="this.type='password'" onClick="this.type='text'"/>

Open in new window


Now you may code it for user
0
 
GaryCommented:
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("")
});
0
 
leakim971PluritechnicianCommented:
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

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
nickinthoozAuthor Commented:
Is there a way to do this without using an input?  Make it use a div?
0
 
GaryCommented:
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.
0
 
nickinthoozAuthor Commented:
only for aesthetic reasons
0
 
GaryCommented:
Style the input however you like.
0
 
nickinthoozAuthor Commented:
Yeah, that's what I'm doing, and yes jagadishdulal, that is amazingly simple.  Makes me hate life for not thinking of it.
0
 
leakim971PluritechnicianCommented:
don't forget to try it on all browsers...
0
 
Ray PaseurCommented:
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 !
0
All Courses

From novice to tech pro — start learning today.