SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Onblur problems with type change (password <-> text)

    I'm using the following to change the type of a prepopulated text field to password and to clear the text, allowing the user to enter his password:

    Code:
    <script type="text/javascript" language="javascript">
    function toPassword(oInput) {
    	var newEl = document.createElement('input');
    	newEl.setAttribute('type', 'password');
            newEl.setAttribute('name', 'password');
           	oInput.parentNode.replaceChild(newEl,oInput);
    	toPassword.el = newEl;
            setTimeout('toPassword.el.focus()',100); 
    	return true;
    }
    </script>
    
    <input type="text" name="username" value="Enter your Username" 
    onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')value='Enter your Username';">
    
    <input type="text" name="password" value="Enter your Password" 
    onfocus="if(this.value==this.defaultValue)return toPassword(this)" />
    The username box works #1; onfocus, text disappears, onblur, text reappear.
    The password one however has 2 problems. First, onfocus, the size of the box change a little in IE (it gets smaller), but not in Firefox. Thats annoying and would like to fix it.

    Secondly, I can't refill the "Enter your password" value onblur. I tried everything I would need to rechange the type to text, too.

    Thanks for the help!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FiReaNG3L
    First, onfocus, the size of the box change a little in IE (it gets smaller), but not in Firefox. Thats annoying and would like to fix it.
    That's an IE bug. Use CSS to specify the width in EMs or PXs.

    Quote Originally Posted by FiReaNG3L
    Secondly, I can't refill the "Enter your password" value onblur. I tried everything I would need to rechange the type to text, too.
    Did you try changing the type back to text?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah tried that (with the equivalent of the toPassword function, except I reversed the type to text and changed the onfocus to onblur for the timeout) but for some reason the text doesn't want to reset back.

    And for the IE bug (another one!), I tried to specify the size in px, but it changes anyway. And if I try to set a higher value to compensate for the shrinkage, its never quite right (either a little too large or a little too small. And there's no such thing as .5 px! )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •