Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Switich Input field from TYPE=TEXT to TYPE=PASSWORD

Reply
Thread Tools

Switich Input field from TYPE=TEXT to TYPE=PASSWORD

 
 
Vincent van Beveren
Guest
Posts: n/a
 
      07-13-2006
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
 
Reply With Quote
 
 
 
 
Csaba Gabor
Guest
Posts: n/a
 
      07-13-2006
Vincent van Beveren wrote:
> 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

 
Reply With Quote
 
 
 
 
goulart@gmail.com
Guest
Posts: n/a
 
      07-13-2006
try

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

might work.

 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      07-13-2006
http://www.velocityreviews.com/forums/(E-Mail 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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
Vincent van Beveren
Guest
Posts: n/a
 
      07-13-2006
>> 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.


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

 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      07-13-2006
Vincent van Beveren said the following on 7/13/2006 3:02 PM:
>>> 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.

>
> 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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
javascript validation for a not required field, field is onlyrequired if another field has a value jr Javascript 3 07-08-2010 10:33 AM
how to show an Image field from a SQL Server table field to a aspx page J Sahoo ASP .Net 3 04-30-2009 08:30 PM
1.Enter space bar for field names and save the field.The field shoud not get saved and an alert should be there as"Space bars are not allowed" Sound Javascript 2 09-28-2006 02:43 PM
Validating a field based on value of another field Emmanuel ASP .Net 1 11-22-2005 12:35 PM
Placing the selection of a list field in a text field Jerry Manner HTML 5 06-09-2005 01:52 PM



Advertisments