Switich Input field from TYPE=TEXT to TYPE=PASSWORD

[Vincent van Beveren]

Hi everyone,

I have a page with a login box. Because of lack of space, instead of
labels I put the descriptive text in the input fields (so username input
says 'username', and password input says 'password').

The password field however, once it does have the focus, it should mask
its input. Now what I've done, and works in firefox, is
onfocus="this.type='password'; this.value='';". (Its a bit more complex
than that, but this is essentially it). Unfortunatly IE complains.

Is there any way to perform this trick in IE without showing and hiding
components? In other words, is there a way to change the type of an
INPUT or make an INPUT TYPE="text" field mask anyway?

Thanks,
Vincent

 

[Csaba Gabor]

Hi everyone,

I have a page with a login box. Because of lack of space, instead of
labels I put the descriptive text in the input fields (so username input
says 'username', and password input says 'password').

The password field however, once it does have the focus, it should mask
its input. Now what I've done, and works in firefox, is
onfocus="this.type='password'; this.value='';". (Its a bit more complex
than that, but this is essentially it). Unfortunatly IE complains.

Is there any way to perform this trick in IE without showing and hiding
components? In other words, is there a way to change the type of an
INPUT or make an INPUT TYPE="text" field mask anyway?

An alternate approach is to have a separate password field and to
position your special text field over it so that when your text field
receives focus, it does this.style.display="none" and will disappear.

Csaba Gabor from New York

 

[goulart]

try

onfocus = "this.setAttribute('type', 'password')"

might work.

 

[Randy Webb]

(e-mail address removed) said the following on 7/13/2006 10:21 AM:

try

onfocus = "this.setAttribute('type', 'password')"

might work.

And then again, it won't. It would have taken less time to test it than
post it though.

 

[Vincent van Beveren]

onfocus = "this.setAttribute('type', 'password')"

And then again, it won't. It would have taken less time to test it than
post it though.

I tried that, makes no difference. I guess I'll go for the hide/show
thing, though it'll take some additional work to get the focus going
right. I also thought about dynamically replacing the whole component
with DOM. That should make the focus work more intuitively... I kinda
hoped there would be a very easy solution... If not I'll guess I'll
fiddle a bit.

Thanks!
Vincent

 

[Randy Webb]

Vincent van Beveren said the following on 7/13/2006 3:02 PM:

I tried that, makes no difference.

That is why I said "it won't" instead of "It might not".

I guess I'll go for the hide/show thing,

though it'll take some additional work to get the focus going
right.

focus "going right" would be simple. onfocus="that.focus()" where "that"
is a reference to the field you unhide and you onfocus the one you are
going to hide.

I also thought about dynamically replacing the whole component
with DOM.

That may or may not be the best way as it may change the tab order of
the input fields. If you try that route, set the tabIndex as well as
creating the element to retain tab navigability.

That should make the focus work more intuitively...
I kinda hoped there would be a very easy solution...

The "easiest" solution is to use a password field to start with. How
would non-JS users get a password field?

Make it a password field, onload remove it and recreate it as a text
input with the value set, then onfocus remove that input and put the
password field back. Very messy situation.