How to show a <span> or <div> tag content as asterisk(*)

Question

I am going to display the current password of the user like

Current Password : ******

I want the exact number of asterisk's(*), as the number of the password characters. Also it should be safe that it should not visible at View Source. Is any jQuery plugin available? or can we achieve it through JavaScript?

Answer 1

You can get password length(count) from backend and display the * as that count by simple loop and set the string to div (using innerHTML). No one get your actual password but may be the count

EDIT:

string pass = '';
String passcount=10; //get it from backend i dont know your language
for(int i=0; i<passcount.Length; i++){
   pass+="*";
}
........

document.getElementById('yourdivID').innerHTML =pass;

Answer 2

I've voiced my disapproval and warnings... So with all that said simply count the number of characters in the password and echo that many * s in the view. There's no need for Javascript.

Answer 3

I don't know what programming language you are using, but if it was something like ASP.NET, I would suggest in code behind to get the length of the string, and then set the password as asterisks before you send it to the client side page.

Do this in the relevant place of your client side page:

string displayPassword = string.Empty;
for(int i = 0; i < thePassword.Length; i++)
   displayPassword += "*";

Then expose the "displayPassword" variable on your page instead of the actual password.

I think there may be something with what you are trying to do though, really you shouldn't be able to decrypt the passwords (hashing is best), and also showing the user the number of characters in the password whilst hiding the password seems a little conflicting.

Answer 4

1. Use <input type=password> with no borders and readonly:

< input type="password" name="password" style="border: 0px black solid" "readonly=readonly">

1. Use javascript. If your DIV id is "password", use the following script:

    var password = <your password here> var dispPassword = new String(); var n = password.length; while(dispPassword.length < n){ dispPassword.push("*"); } document.getElementById("password").innerHTML = dispPassword;

Note: It is not considered a good practice to display a password at all. The user can see the password by seeing the source of the page, and the purpose of a password is lost. Actually it is not at all secure to have the password as plain text on the database. It should be encrypted (hashed).

Answer 5

You say that you are retreiving the password, so use

<input type="password" />

If you are not happy with the styling, you can remove the border with css.