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.
lakodajin 0 Newbie Poster
zortec 11 Junior Poster
You just have to change the input type to password.
almostbob 866 Retired: passive income ROCKS
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
nav33n commented: Good suggestion :) +5
lakodajin 0 Newbie Poster
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
Bukhari1986 -4 Newbie Poster
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
almostbob 866 Retired: passive income ROCKS
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.