input box 크기 자동으로 늘리기 > jquery

input 박스의(텍스트) 넓이를 글자에 맞게 늘리는 css속성은 없습니다.
다만 size를 조절 하거나 width를 지정해줄뿐입니다. (auto속성 불가)
이럴경우 자바 스크립트를 통해서 조절해야하는데요, 시도해보았던 몇가지 방법들을 공유하고자합니다.
물론, 제가 내린 결론은 하나입니다. 편의상 인풋 dom은 $(input)으로 쓰겠습니다. 또한, 가급적 초기화 코드는 쓰지 않겠습니다.

size프로퍼티를 조절 (Bad)

input의 size프로퍼티를 통해서 넓이를 조절하는 방법입니다.

$(input).on('keydown', function(e){
    $(input).attr('size', $(input).val().length);
});

input에 쓰여진 글자의 숫자를 새고 그만큼 size를 늘리는 방식입니다. 한글 및 영문, 폰트크기에 따라서 달라지기 때문에 width값이 정확하지 않은 경우가 대부분입니다.

input의 scroll width값을 계산 (Bad)

input의 width속성을 통해 사이즈를 늘려주는데 이 width 값의 계산을 scroll width를 통해 할 수 있습니다.

$(input).on('keydown', function(e){
    $(input).css('width', $(input)[0].scrollWidth + 10); // 글자 하나의 대략적인 크기 

});

이럴경우, 비슷하게는 동작하지만 마찬가지로 정확하게 늘어난단 느낌은 받지 못하고 scrollwidth가 정확히 동작하지 않습니다. 인풋에 사이즈가 정해져있고 글자들이 있는 부분의 사이즈를 계산하여 스크롤이 생긴다음에 움직이기 때문에 버벅거립니다. 그리고 크기가 늘어나다가 줄어들었을 경우 제대로 반영하지 못합니다.

가상돔을 만들어서 width를 계산 (Good)

가상 dom을 만들어서 input의 글자들을 넣고 넓이를 계산하여 반영하는 방식입니다.

$(input).on('keydown', function(e){
    var value = $(input).val();
  $(body).append('<div id="virtual_dom">' + value + '</div>'); 
  //실제 코드에는 상위돔에 집어넣어주세요.

    var inputWidth =  $('#virtual_dom').width() + 10; // 글자 하나의 대략적인 크기 

    $(input).css('width', inputWidth); 
  $('#virtual_dom').remove();
});

위와 같이 가상의 돔을 만들어서 input의 value를 집어 넣고 그 돔의 width를 잽니다. 그 width를 다시 input에 setting하고 가상돔은 지우면 끝!. 이왕이면 가상돔은 안보이게 해주고 늘릴 글자의 여유크기는 10px보다는 좀 더 주는게 매끄러운것 같습니다.

위의 코드에서 최적화해야할것은 많지만 최대한 간단히 나타내 보았습니다. 주의할점은 div는 기본속성이 block이라 한줄을 모두 차지하기 때문에 div로 가상돔을 만드려면 ''display: inline-block''을 꼭 집어 넣어 주세요.