1

ユーザーが入力すると、（.a入力）自動増加幅を実行しました。
しかし、今は (.b) を同時に右に自動移動する方法がわかりませんか? 重ならないよう
によろしくお願いします。

if ($a.width()"+1px"){
 $b.animate({
  left: "+1px"
 }, 1000 );
};

html css

<input class="a" value="texttext">
<input class="b" value="texttext">

.a{
position: absolute;
left: 10px;
top: 22px;
width: 100px;
font-size: 19px;
}
.b{
position: absolute;
left: 110px;
top: 22px;
width: 100px;
font-size: 19px;
}
4

1 に答える 1

1

この問題には別のアプローチが必要だと思います。keyupテキストを入力しているときに、イベントにフックしてinput.aテキスト幅を取得する必要があります。input.aただし、通常の方法ではテキストの幅を取得できないため、入力するたびに のテキストで更新されるように、ある種の複製された div を使用する必要があります。

$('#aclone').html($('input.a').val());

$('input.a').keyup(function () {

    var clone_width, apos, bleft;

    // make clone contain what input.a contains
    $('#aclone').html($(this).val());

    // get the width of cloned text
    clone_width = $('#aclone').width();

    // if it's bigger than input.a's current size, resize it
    if (clone_width > $(this).width()) {
        $(this).width(clone_width);
    }

    // calculate position for b
    apos = $(this).position();
    bleft = apos['left'] + $(this).width();

    // adjust input.b's position
    $('input.b').css({'left': bleft});

});

これをチェックしてください：http://jsfiddle.net/aemhd/

PS: 私のフィドルにはクローン div が表示されています。非表示にしたい場合はdisplay:none、ブラウザが幅を計算できないため使用しないでください。代わりにtop:-9999px;left:-9999px;、CSS を使用してビューポートの外側に配置してください。

于 2012-08-27T00:34:57.980 に答える