5

我想要什么：在焦点上，通过 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>
4

3 回答 3

2

我认为这里的问题是“index_login_dummy2”文本框和提交按钮之间没有间距。如果您将 .input_h 样式更改为display:inline;您应该看到问题。

一种解决方案是在“index_login_dummy2”框的右侧应用边距。

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

应该做的伎俩。

于 2010-08-03T13:56:50.710 回答
1

在它周围放一个跨度，我试过了，它似乎有效

<span>    
<input id="index_login_email" type="text" value="Email" name="email">
<input id="index_login_dummy" type="text" value="Password" name="dummy"></span>
于 2010-08-03T13:54:20.527 回答
1

我在 IE9 中输入和选择元素时遇到了这个跳跃问题（将屏幕上的 px 向左或向右移动）。我首先认为这是由 :focus 伪选择器引起的。这似乎不是原因。当我将 css 规则从更改display: inline-block为display:block跳跃元素时，问题就解决了

于 2015-06-10T11:02:09.990 回答