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并获取文本宽度。但是，您无法通过正常方式获得文本的宽度，因此您需要使用某种克隆的 div 以在input.a每次键入时使用 's 文本进行更新：

$('#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 回答