[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Hide Password until user clicks it, then reveal it.

Posted on 2013-05-11
10
Medium Priority
?
430 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
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!

 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 2000 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 111

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

649 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