JS & DOM problem.

[fedlerner]

Hi guys,
I've a problem. The following script works on FireFox, Google Chrome and IE8, but it seems it doesn't work on IE7...
When the page loads, the username & password boxes are displayed. The username field says "username", and the password box says "password" (style text). When you click on the password field, I change the password field using DOM to one with style=password, so when the user types his password, it isn't displayed and it shows the *******.
The problem is that on IE7, when you click on the Password box, the box gets moved to the right....
I've tried but haven't found a solution for this, please help!! .

<script type="text/javascript">
function switchto(q)
{
    if (q)
    {
        document.getElementById('ln_auth_password_hdrtxt').style.display="none";
        document.getElementById('ln_auth_password_hdr').style.display="inline";
        document.getElementById('ln_auth_password_hdr').focus();
    }
    else
    {
        document.getElementById('ln_auth_password_hdr').style.display="none";
        document.getElementById('ln_auth_password_hdrtxt').style.display="inline";
    }
}
</script>

And down...

   $_username = (!empty($_POST['ln_auth_username'])) ? $_POST['ln_auth_username'] : 'username';
   $_password = (!empty($_POST['ln_auth_password'])) ? $_POST['ln_auth_password'] : '';
   
   if (!SAuthentication::is_auth()) echo <<<HOKA
    <div id="header_login_con">
     <form action="./login.php" method="post">
     <span class="hdr_ln_input"><input class="header_login_ipt" type="text" tabindex="1" value="{$_username}" maxlength="18" onblur="if (this.value == '') { this.value= 'username'; }" onfocus="if (this.value == 'username') { this.value= ''; }" name="ln_auth_username" /></span><span class="hdr_ln_right"><input class="header_login_sub" tabindex="3" type="submit" name="login_submit" value="login to account" /></span><br class="clear" />
     <span class="hdr_ln_input"><input class="header_login_ipt" type="text" tabindex="2" value="password" maxlength="18" id="ln_auth_password_hdrtxt" onclick="switchto(1)" onkeydown="switchto(1)" name="ln_auth_passwordtxt" /></span>
     <span class="hdr_ln_input"><input class="header_login_ipt" type="password" tabindex="3" value="{$_password}" maxlength="18" id="ln_auth_password_hdr" onblur="if (this.value=='')switchto(0)" style="display:none" name="ln_auth_password" /></span><span id="hdr_ln_rightbtm"><a href="./login.php?do=lostpw">forgot password?</a></span><br class="clear" />
     </form>
     </div>
     <br class="clear" />
    </div>

Please, I really need help with this...

[Fang]

The length of the password box is shorter, it doesn't move to the right with the snippet you have given.

[Tcobb]

Yeah--try putting a "size=18" instead of a maxlength attribute. It seems that this is more an html or CSS problem than anything else.