Twitter Bootstrap : 변경시 내용에 맞게 입력 크기 조정

Question

숫자 입력란이 있습니다. 최소 너비로 시작하여 입력이 기본값 -1에 적합하도록하려고합니다. 값이 -100, -1,000 등으로 감소하거나 전체 필드가 ​​표시되도록 입력 너비를 조정해야합니다.

<div class="col-lg-4 input-group "> 
    <span class="input-group-addon">$</span> 
    <input name="childPrice" id="childPrice" type="number" step=".25" value="-1" min="-99999" max="-1" class="form-control" onchange="$(this).attr('size', $(this).val().length);" size="9"> 
    <span class="input-group-addon">/ticket</span> 
</div> 

Answer 1

간단한 방법은, 다음 한 문자의 폭을 미리 계산 고정 폭 글꼴을 사용하는 것, 동적으로하는 것이 필요 얼마나 많은 문자에 따라 그 폭을 설정합니다 분야에 변화 처리기를 추가 있다.

텍스트 필드의 값을 취하는 변경 핸들러를 사용하여 display: none으로 분리 된 노드를 만들고 DOM에 삽입하고 너비를 측정 한 다음 해당 값을 사용하는 것이 더 어렵습니다 필드의 크기를 동적으로 조정할 수 있습니다.

$('#my-text').on('keyup', function(ev){ 
    var field = $(ev.currentTarget), 
     origWidth = field.outerWidth(), 
     width = 0, 
     val = field.val(), 
     tmp = $('<p style="display:none;">' + val + '</p>'); 

    $('body').append(tmp); 
    width = tmp.outerWidth(); 
    tmp.remove(); 
    if (width > origWidth) 
     field.css('width', width); 
});