www.webdeveloper.com
Results 1 to 3 of 3

Thread: JS & DOM problem.

  1. #1
    Join Date
    Mar 2009
    Posts
    2

    Exclamation JS & DOM problem.

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

    Code:
    <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...
    Code:
       $_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...

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The length of the password box is shorter, it doesn't move to the right with the snippet you have given.

  3. #3
    Join Date
    Mar 2009
    Posts
    523
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles