Internet Explorer, jQuery: поле ввода, jumps/moves, будучи замененным тем же самым один
Что я хочу: К, на фокусе, изменяются, одно поле ввода в другого скрываются () и шоу ().
Что я получаю: В Internet Explorer (7/8), поле ввода перемещает несколько пикселей направо при фокусировке.
- Работы хорошо в других браузерах (очевидно).
Вот ссылка туда, где я воссоздал проблему:
<ссылка удалила из-за того, чтобы больше быть релевантным>
Источник доступен в файле, связанном выше, но я буду включать его здесь также для Вашего удобства.
<!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 для хорошо сформулированного вопроса!;)
Править:
Когда я поместил поля формы в таблицу, она работает, как предназначено. Я иногда предполагаю, что необходимо пойти с решениями как они, но я очень не хочу не знать почему. Я соглашаюсь однако с объяснением, что различные браузеры тянут входные элементы формы по-другому (и что в IE входная кнопка влияет на остальную часть элементов).
Рабочий код:
<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>