Question

I did (.a input) auto increase width, when user type.
But now i don’t know how to make (.b) at same time auto move to right? avoid overlapping
Thank you in advance.

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;
}

Answer 1

I think you need a different approach to this problem. You need to hook to the keyup event of input.a and get the text width as you’re typing the text. However, you cannot get the width of the text by normal means so you would need to employ some sort of cloned div to be updated with input.a‘s text every time you type:

$('#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});

});

Check this out: http://jsfiddle.net/aemhd/

P.S.: my fiddle has the clone div shown. If you want to hide it, do not use display:none as the browser wouldn’t able to calculate it’s width if it’s hidden, instead just position it outside of the viewport using top:-9999px;left:-9999px; in CSS.