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>
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.
should do the trick.