Switich Input field from TYPE=TEXT to TYPE=PASSWORD

Discussion in 'Javascript' started by Vincent van Beveren, Jul 13, 2006.

  1. 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
     
    Vincent van Beveren, Jul 13, 2006
    #1
    1. Advertising

  2. Vincent van Beveren

    Csaba Gabor Guest

    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
     
    Csaba Gabor, Jul 13, 2006
    #2
    1. Advertising

  3. Vincent van Beveren

    Guest

    try

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

    might work.
     
    , Jul 13, 2006
    #3
  4. Vincent van Beveren

    Randy Webb Guest

    Randy Webb, Jul 13, 2006
    #4
  5. >> 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
     
    Vincent van Beveren, Jul 13, 2006
    #5
  6. Vincent van Beveren

    Randy Webb Guest

    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/
     
    Randy Webb, Jul 13, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. feng
    Replies:
    4
    Views:
    1,351
  2. cjl
    Replies:
    1
    Views:
    10,552
    Michael Winter
    Oct 31, 2005
  3. AAaron123
    Replies:
    2
    Views:
    2,369
    AAaron123
    Jan 16, 2009
  4. AAaron123
    Replies:
    1
    Views:
    1,422
    Oriane
    Jan 16, 2009
  5. cjl
    Replies:
    7
    Views:
    219
    Thomas 'PointedEars' Lahn
    Oct 30, 2005
Loading...

Share This Page