Solved

Hide Password until user clicks it, then reveal it.

Posted on 2013-05-11
10
425 Views
Last Modified: 2013-05-11
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.
0
Comment
Question by:nickinthooz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +2
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39158307
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39158312
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
 
LVL 6

Author Comment

by:nickinthooz
ID: 39158326
Is there a way to do this without using an input?  Make it use a div?
0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39158334
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
 
LVL 58

Expert Comment

by:Gary
ID: 39158339
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
 
LVL 6

Author Comment

by:nickinthooz
ID: 39158342
only for aesthetic reasons
0
 
LVL 58

Expert Comment

by:Gary
ID: 39158345
Style the input however you like.
0
 
LVL 6

Author Comment

by:nickinthooz
ID: 39158347
Yeah, that's what I'm doing, and yes jagadishdulal, that is amazingly simple.  Makes me hate life for not thinking of it.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39158353
don't forget to try it on all browsers...
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39158760
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question