5

私が欲しいもの：フォーカス時に、hide（）とshow（）によって1つの入力ボックスを別の入力ボックスに変更します。

結果: 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;、問題が発生するはずです。

1 つの解決策は、"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 に答える