Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Internet explorer, jQuery: input box jumps/moves when being replaced with the exact same one

What I want: To, on focus, change one input box into another by hide() and show().

What I get: In Internet Explorer (7/8), the input box moves a few pixels to the right when focusing.

  • Works well in other browsers (obviously).

Here's a link to where I have re-created the problem:

< link removed due to no longer beeing relevant >

The source is available in the file linked above, but I'll include it here as well for your convenience.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-language" content="en"/>
<script src="includes/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
    $("#index_login_dummy").focus(function(){
        $(this).hide();
        $('#index_login_dummy2').show().focus();
    });
});
</script>
<style type="text/css">
.input_h {display:none;}
</style>
</head>

<body>

<div id="index_login">
    <form method="post" name="index_login" action="login.php">
    <input id="index_login_email" type="text" value="Email" name="email">
    <input id="index_login_dummy" type="text" value="Password" name="dummy">
    <input id="index_login_dummy2" type="text" class="input_h" value="Password" name="dummy"><input type="submit" class="input_button" value="Login">
    </form>
</div>

</body>
</html>

+1 for a well formulated question! ;)

EDIT:

When I put the form fields into a table it works as intended. I guess sometimes you have to go with solutions as these, but I hate not knowing why. I am however fine with the explanation that the different browsers draw the form input elements differently (and that in IE the input button affects the rest of the elements).

Working code:

<div id="index_login">
    <form method="post" name="index_login" action="login.php">
    <table>
        <tr>
            <td><input id="index_login_email" type="text" value="Email" name="email"></td>
            <td><input id="index_login_dummy" type="text" value="Password" name="dummy"><input id="index_login_dummy2" type="text" class="input_h" value="Password2" name="dummy"></td>
            <td><input type="submit" class="input_button" value="Login"></td>
        </tr>
    </table>
    </form>
</div>
like image 975
Mattis Avatar asked Oct 14 '22 02:10

Mattis


2 Answers

I think the problem here is that there is no spacing between the "index_login_dummy2" textbox and the submit button. If you change your .input_h style to display:inline; you should see the problem.

One solution is to apply a margin to the right of the "index_login_dummy2" box.

.input_h { display:none; margin-right: 4px; }

should do the trick.

like image 165
Mutt Avatar answered Nov 01 '22 19:11

Mutt


put a span arround it, i tried it and it seems to work

<span>    
<input id="index_login_email" type="text" value="Email" name="email">
<input id="index_login_dummy" type="text" value="Password" name="dummy"></span>
like image 29
Christian Smorra Avatar answered Nov 01 '22 19:11

Christian Smorra