Điều tôi muốn: To, on focus, thay đổi một hộp nhập vào một hộp khác bằng cách ẩn() và show().Internet explorer, jQuery: hộp đầu vào nhảy/di chuyển khi được thay thế bằng chính xác
Tôi nhận được: Trong Internet Explorer (7/8), hộp nhập sẽ di chuyển một vài pixel sang phải khi lấy nét.
- Hoạt động tốt trong các trình duyệt khác (hiển nhiên).
Dưới đây là một liên kết đến nơi tôi đã tái tạo các vấn đề:
< liên kết loại bỏ do không còn beeing liên quan>
Các nguồn có sẵn trong file liên kết ở trên , nhưng tôi cũng sẽ đưa nó vào đây để thuận tiện cho bạn.
<!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 cho câu hỏi được xây dựng tốt! ;)
EDIT:
Khi tôi đặt các trường biểu mẫu vào bảng hoạt động như dự định. Tôi đoán đôi khi bạn phải đi với các giải pháp như thế này, nhưng tôi ghét không biết tại sao. Tuy nhiên tôi tốt với lời giải thích rằng các trình duyệt khác nhau vẽ các phần tử biểu mẫu đầu vào khác nhau (và trong IE, nút đầu vào ảnh hưởng đến phần còn lại của các phần tử).
đang làm việc:
<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>
Cảm ơn bạn, có lẽ bạn đang đúng về vấn đề nuôi ong rằng đầu vào ẩn được đính kèm gần nút gửi. Tuy nhiên, đặt một lợi nhuận cho nó không làm việc cho tôi. – Mattis
Lề bên phải không sắp xếp bên cạnh nút nhập. Tuy nhiên, khoảng cách giữa email và trường nhập mật khẩu vẫn di chuyển. Và lề phải cũng làm cho nó di chuyển theo hướng khác trong các trình duyệt khác ... :) – Mattis
Tôi cho rằng câu trả lời của bạn là đúng nhất, vấn đề chắc chắn dựa vào cách trình duyệt diễn giải biểu mẫu đầu vào.Tôi đặt chúng vào một bảng (nhập mã trong câu hỏi) và tất cả là tốt. Cảm ơn! – Mattis