By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,846 Members | 1,680 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,846 IT Pros & Developers. It's quick & easy.

Switch element's type

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.