469,272 Members | 1,467 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,272 developers. It's quick & easy.

Switch element's type

Hello,

I have an idea which requires me to change an input element's "type",
but it doesn't work well in Internet Explorer, although it works just
fine in Firefox.

Namely, I want to have an <input type="text" name="password" />
element in the page, but when the user clicks in it, I will fire an
onfocus event which will in change turn the element into a
type="password" field. This gives me the possibility to have the text
"Enter your password here" in the field, but when the user clicks in
it, he can safely enter his password by having only the stars
displayed in it. I did it basically like this:

element = document.getElementById( "users_password" );
element.type = "password";

and, onblur, it does:

if ( element.value == "" ) {
element.type = "text";
element.value = "Enter your password here";
}

However, it doesn't work in IE. It says "Could not get the type
property. This command is not supported". Now, obviously, it really
doesn't support it, but maybe there's a function or something that can
turn it into a password field?

I know that a solution might lie in fetching user's input into another
field that I'll pass to the server, and manually display stars instead
of what he typed, but I find this solution rather bad since there's a
great possibility I would accidentally restrict some characters and
keys in the field, which is always the risk when catching the user's
input (for example, they want to paste the text from clipboard, they
want to press F5 for some reason etc.). I just don' t like it.
Another solution would be to make it the text, but when he clicks in
it, the script could silently hide the input, put another, password,
field instead, focus it inside, but this seams rather complicated and
far less elegant than my first approach.
Seems to me the best solution was mine, but the stupid IE does not
allow it.
Any suggestions, ideas or critics, please?
Thank you,
Darko

Apr 25 '07 #1
1 5817
On Apr 25, 6:58 pm, Darko <darko.maksimo...@gmail.comwrote:
Hello,

I have an idea which requires me to change an input element's "type",
but it doesn't work well in Internet Explorer, although it works just
fine in Firefox.

Namely, I want to have an <input type="text" name="password" />
element in the page, but when the user clicks in it, I will fire an
onfocus event which will in change turn the element into a
type="password" field. This gives me the possibility to have the text
"Enter your password here" in the field, but when the user clicks in
it, he can safely enter his password by having only the stars
displayed in it. I did it basically like this:

element = document.getElementById( "users_password" );
element.type = "password";

and, onblur, it does:

if ( element.value == "" ) {
element.type = "text";
element.value = "Enter your password here";

}

However, it doesn't work in IE. It says "Could not get the type
property. This command is not supported". Now, obviously, it really
doesn't support it, but maybe there's a function or something that can
turn it into a password field?

I know that a solution might lie in fetching user's input into another
field that I'll pass to the server, and manually display stars instead
of what he typed, but I find this solution rather bad since there's a
great possibility I would accidentally restrict some characters and
keys in the field, which is always the risk when catching the user's
input (for example, they want to paste the text from clipboard, they
want to press F5 for some reason etc.). I just don' t like it.
Another solution would be to make it the text, but when he clicks in
it, the script could silently hide the input, put another, password,
field instead, focus it inside, but this seams rather complicated and
far less elegant than my first approach.
Seems to me the best solution was mine, but the stupid IE does not
allow it.
Any suggestions, ideas or critics, please?
Thank you,
Darko
Well, in lack of respond I accepted the third solution listed above,
and it seems to be working just fine. Not so much more coding,
neither.

Regards

Apr 26 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Dennis M. Marks | last post: by
27 posts views Thread by Yuriy Solodkyy | last post: by
7 posts views Thread by cytec123187 | last post: by
13 posts views Thread by xz | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.