Input type="password"

JavaScript
1

How do I tell my password function to have input type=“password” onfocus.

I also want the text “Password” to disappear onfocus.


function pass_focus(){
     if (pass.value == 'Password'){
	fields.replaceChild(new_pass, pass);
	window.setTimeout(function(){ new_pass.focus(); }, 0);
	}
     }
	
     function pass_blur(){
	if (new_pass.value == ''){
		fields.replaceChild(pass, new_pass);
	}
     }
2

You can’t change the type attribute in Internet Explorer so the only way to do it is to swap the entire field (at least in IE). See http://javascript.about.com/library/blpass1.htm for code that will do the necessary field substitution in IE and which will just change the type in other browsers.

3

Personally I would use the new ‘placeholder’ attribute, but others here would disagree and it isn’t implemented in all browsers yet

Why not put the text normally over the input box in a div and fade it out when someone starts to enter the password?

4

Surely it depends on how all the other fields in the form are being displayed. If all of them have their description as the default text so as to save space on a cluttered page then having a password field appear to do the same would be the most sensible alternative.

Which approach to take for all the fields should have been decided prior to starting on coding the HTML for the site. If that decision was to put the descriptions inside the fields (which isn’t necessarily a good decision to have made - but could have been a requirement specified by the client for whom the site is being created) then it isn’t appropriate to treat a password field any differently.

Also if you did use the paceholder attribute then you’d need to use JavaScript to emulate the functionality in ALL the browsers that don’t yet support it.

5

I’m not suggesting it should look any different :slight_smile:

6

If the div puts the text exactly where it would need to be in order that it doesn’t look different then it would behave different because you couldn’t click on the field to enter the password because the div would be in the way. If the div is placed so as to not interfere with the password field then it would look different.

7

Trying to think creatively, what if the password field were on top, but with 0 opacity. That way when you click, it is the password field that you’re interacting with, and the fade effect can be applied to the password field itself.

8

Use javascript to make it clickable :slight_smile:

But then again, I personally wouldn’t do it. I’d use the placeholder attribute :wink:

9

I am reading through this thread, the accessibility is bugging me. Do you want to see plain text then change that to *s onBlur?