Friends , I wana know that how we can change text symbol in password field by using JavaScript. I mean by default there is filled circle , but I want "*" this symbol.

Recommended Answers

All 5 Replies

You just have to change the input type to password.

the user agent chooses its own default style, and there is (to my knowledge) no CSS attributes you can change to determine the masking character.
Of course, this is possible if the password field is just a standard text field, and you manually mask the input with a javascript event handler (onKeyup/onkeypress, probably). You could even declare the field as type="password" in the HTML, then have your JS function modify the DOM to change its type. I'd be a little wary about doing this, though; the browser implementation is almost certainly pretty solid, and circumventing established security functionality to roll your own is rarely a good idea.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var k=0;
var df;
window.onload=function() {
df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
k++;
for(c=0;c<df[1].value.length;c++) {
df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
 }
 }
 }
</script>
</head>
<body>
<noscript><div>Without javascript enabled you will be unable to login</div></noscript>
<form action="http://www.google.com/">
<div>
<input type="hidden" name="password">
<input type="text">
<input type="submit" value="submit password">
</div>
</form>
</body>
</html>

It is a bad idea
repeated :: it is a bad idea
each browser user expects the character that their browser uses as a mask
dont mess with it

commented: Good suggestion :) +5

the user agent chooses its own default style, and there is (to my knowledge) no CSS attributes you can change to determine the masking character.
Of course, this is possible if the password field is just a standard text field, and you manually mask the input with a javascript event handler (onKeyup/onkeypress, probably). You could even declare the field as type="password" in the HTML, then have your JS function modify the DOM to change its type. I'd be a little wary about doing this, though; the browser implementation is almost certainly pretty solid, and circumventing established security functionality to roll your own is rarely a good idea.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var k=0;
var df;
window.onload=function() {
df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
k++;
for(c=0;c<df[1].value.length;c++) {
df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
 }
 }
 }
</script>
</head>
<body>
<noscript><div>Without javascript enabled you will be unable to login</div></noscript>
<form action="http://www.google.com/">
<div>
<input type="hidden" name="password">
<input type="text">
<input type="submit" value="submit password">
</div>
</form>
</body>
</html>

It is a bad idea
repeated :: it is a bad idea
each browser user expects the character that their browser uses as a mask
dont mess with it

wow gr8 ur code is working ,, I am really happy , thanx a lot my friend

brother can you explain the coding you made
<script type="text/javascript">
var k=0;
var df;
window.onload=function() {
df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
k++;
for(c=0;c<df[1].value.length;c++) {
df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
}
}
}
</script>

I will be waiting for the explanation of the above code

read the javascript, it makes perfect sense to me :)
browse the w3c javascript tutorials for better help, array processing, and the dom
most I have used for so long I dont think about it any more, but I'll try
df expands to document.forms.[subscript] where subscript is the position of the form field, by order of its creation in the html code
the hidden field for the password is the first form field subscript 0
the input field is second, subscript 1

<script type="text/javascript">
var k=0;
var df;
//onload monitor document.forms[1] (input)
window.onload=function() {
df=document.forms[0];
//onkeyup[1] (input)
df[1].onkeyup=function() {
// read each character position in [1] 
// write it to the same position in [0] (hidden password)
df[0].value+=df[1].value.charAt(k);
k++;
// obfuscate [1](input)
for(c=0;c<df[1].value.length;c++) {
df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
}}}</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.