display * instead of password value in the display table in list page?

Question

i have a table with the fields username , password , email and phone . but the display page should show the value off the password as * . only when editing it should show the value ! Eg: take my password as pass1234 it should be displayed in list page as *** but wen editing it it should show as pass1234 . how can i do that ?

Showing the password in plain text at all violates web conventions as it allows shoulder surfing. Also it implies you are storing it in a non hashed form. The plain text of the password should not be retrievable once saved as many people reuse passwords across sites. — Martin Smith
– Martin Smith, Commented Sep 21, 2012 at 11:39
What do you mean by "table"? A table of all your users' passwords, or a <table> with columns for the name, password, email and phone of one user? — Bergi
– Bergi, Commented Sep 21, 2012 at 11:47
<input type="password" > will do this. But as @MartinSmith told you, you should hash the passwords when they are stored in a db :) — OctoD
– OctoD, Commented Sep 21, 2012 at 11:48
yeah it is a a table with all users data . so in list page the password should not be visible directly instead to store as some *****. While editing it can show the actual password — gokul
– gokul, Commented Sep 21, 2012 at 12:00

NedStarkOfWinterfell · Accepted Answer · 2012-09-21 11:44:39Z

0

This requires some Javascript onfocus handler:

field = document.getElementById('pass');
field.onfocus(function() { this.setAttribute('type','text'); });
field.onblur(function() { this.setAttribute('type', 'password'); });

edited Sep 21, 2012 at 11:44

answered Sep 21, 2012 at 11:39

NedStarkOfWinterfell

5,35328 gold badges114 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

What's setAttr; never heard of that method? Also, you forgot to mention that this does not work in IE

NedStarkOfWinterfell Over a year ago

Sorry, that was a mistake. And regarding IE, he can replace it with this.type = 'text'.

Bergi · Accepted Answer · 2012-09-21 11:58:28Z

0

You should only show the password in plaintext when the user asks for it, e.g. by clicking a button. What do you think the asterisks are good for?

However, you can't just set the type of the input, because IE does not allow that. So you will need to completely replace the element. For

<input name="pw" id="pw" type="password"></input>
<label><input id="plain" type="checkbox"></input>Show plaintext</label>

the JS would look like this (using jQuery for event attaching and co, you should be able to adapt this if you need):

$("#plain").change(function() {
     var pw = $("#pw"),
         type = this.checked ? "text" : "password";
     if (type == pw.prop("type")) return;
     $("<input>", {name: "pw", id:"pw", type:type}) // could be done programatically
       .val(pw.val())
       .replaceAll(pw);
});

edited Sep 21, 2012 at 11:58

answered Sep 21, 2012 at 11:44

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

1 Comment

NedStarkOfWinterfell Over a year ago

Oh, I did not know that. As usual, IE comes out to be a pain in the a**!

Collectives™ on Stack Overflow

display * instead of password value in the display table in list page?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related