Input type password question

Get Started
1

Hello forums

Just wondering if it’s possible to display the value of a password input field

<input type=“password” value=“password” />

I want the word “password” to appear as the default value instead of ******** but when a user enters thier password it will display *******

Is this possible?

Thanks

2

Only if you use a type=“text” field to display the word “password” and then use JavaScript to change it to a type=“password” field when they start typing in it.

Preferably you’d have JavaScript when the page first loads change it the other way so that it starts out as a password field and will still *** the input for those without JavaScript.

Okay, it isn’t quite as simple as it looks. Take a look at http://javascript.about.com/library/blpass1.htm where I have uploaded a page that shows you how to do it.

3

Thanks a lot felgall this is what I’m looking for.

You look great! :slight_smile:

4

You are welcome. It gave me another web page with a JavaScript that turned out to be not quite so simple to write as I’d first thought (as it would have been if it weren’t for IE not allowing type to be changed).

5

Hello felgall Here is what I have copy pasted from your tutorial


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<input type="password" name="pass" id="pass">

<script type="text/javascript">
var p = document.getElementById('pass');
/*@cc_on
 @if (@_jscript)
 var inp = document.createElement("<input name='pass'>");
 inp.id = 'pass1';
 inp.type = 'text';
 inp.value = 'password';
 p.parentNode.insertBefore(inp,p);
 p.parentNode.removeChild(p);
 p = document.getElementById('pass1');
 @else */
p.type = 'text';
p.value = 'password';
/* @end @*/
p.onfocus = function() {
if (this.type == 'text') {
/*@cc_on
 @if (@_jscript)
 var inp = document.createElement("<input name='pass'>");
 inp.id = 'pass';
 inp.type = 'password';
 inp.value = '';
 this.parentNode.insertBefore(inp,this);
 this.parentNode.removeChild(this);
 inp.focus();
 @else */
this.value = '';
this.type = 'password';
this.focus();
/* @end @*/
}
}
</script>
</body>
</html>

Question: is it possible to include the javascrip/JScript in an external file so I don’t clutter my html with javascript?

Thanks

6

You can’t do that, since the type property is readonly.

7

The type property is only readonly in IE. Firefox, Opera, Safari, and Chrome all allow it to be updated.

Yes you can, just move it into a separate file and reference that from the existing script tag.

8

Then they are in violation of the DOM specification, afaict.

The IDL for the HTMLInputElement interface states that the type attribute is readonly.

9

I wasn’t commenting on the standards at all since the code to change the field type actually worked in four of the five browsers I tested it in. Of course if you wanted to actually comply with the standards then you’d just move most of the code that swaps out the entire input field outside of the JScript conditional comment. That would have those four browsers running more code than is actually needed since changing the type is more efficient than swapping out the whole field.

Another one of those instances where Internet Explorer gets it right and all the other browsers get it wrong.