Internet Explorer、jQuery：输入框被替换为完全相同的框时会跳转/移动
我想要的：在获得焦点时，通过 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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为这里的问题是“index_login_dummy2”文本框和提交按钮之间没有间距。如果您将 .input_h 样式更改为
display:inline;您应该会看到问题。一种解决方案是在“index_login_dummy2”框的右侧应用边距。
应该可以解决问题。
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.
在它周围放一个跨度，我尝试了一下，似乎有效
put a span arround it, i tried it and it seems to work
我在 IE9 中的输入和选择元素上遇到了这个跳跃问题（将屏幕上的 px 向左或向右移动）。我首先认为这是由 :focus 伪选择器引起的。这似乎不是原因。
当我将 css 规则从
display: inline-block更改为display:block时，跳跃元素问题就解决了I had this jumping problem(moving px on the screen to the left or right) in IE9 on input and select elements. I first thought it was caused by the :focus pseudo selector. This appeared not to be cause.
When i changed the css rule from
display: inline-blocktodisplay:blockthe jumping elements problem was solved