0

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 ?

gokul
  • 1
  • 1
  • 2
    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 Sep 21 '12 at 11:39
  • What do you mean by "table"? A table of all your users' passwords, or a `` with columns for the name, password, email and phone of *one* user?
     – Bergi Sep 21 '12 at 11:47
  • will do this. But as @MartinSmith told you, you should hash the passwords when they are stored in a db :) – OctoD Sep 21 '12 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 Sep 21 '12 at 12:00

2 Answers2

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'); });
SexyBeast
  • 7,913
  • 28
  • 108
  • 196
  • What's `setAttr`; never heard of that method? Also, you forgot to mention that this does not work in IE – Bergi Sep 21 '12 at 11:41
  • Sorry, that was a mistake. And regarding IE, he can replace it with `this.type = 'text'`. – SexyBeast Sep 21 '12 at 11:45
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);
});
Bergi
  • 630,263
  • 148
  • 957
  • 1,375