Internet Explorer, jQuery: поле ввода прыгает / перемещается при замене на точно такой же - PullRequest
Новая
       5

Internet Explorer, jQuery: поле ввода прыгает / перемещается при замене на точно такой же

5 голосов
/ 03 августа 2010

Что я хочу : чтобы в фокусе изменить одно поле ввода в другое с помощью функции hide () и show ().

Что я получу : В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>

Ответы [ 3 ]

2 голосов
/ 03 августа 2010

Я думаю, что проблема здесь в том, что между текстовым полем "index_login_dummy2" и кнопкой отправки нет промежутка.Если вы измените стиль .input_h на display:inline;, вы должны увидеть проблему.

Одним из решений является применение поля справа от поля «index_login_dummy2». 

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

должно помочь.

1 голос
/ 10 июня 2015

У меня была эта проблема с перескоком (перемещение пикселя на экране влево или вправо) в IE9 при вводе и выборе элементов. Сначала я подумал, что это вызвано псевдоселектором: focus. Это оказалось не причиной. Когда я изменил правило css с display: inline-block на display:block проблема с прыгающими элементами была решена

1 голос
/ 03 августа 2010

поместите промежуток вокруг него, я попробовал это, и, кажется, работает 

<span>    
<input id="index_login_email" type="text" value="Email" name="email">
<input id="index_login_dummy" type="text" value="Password" name="dummy"></span>
...