Solved

Hide Password until user clicks it, then reveal it.

Posted on 2013-05-11
10
416 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 108

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

760 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now