javascript - Twitter Bootstrap: Resize number input to fit contents on change -

i have number input field. want start minimum width input fits default value of -1. value decreases -100,-1,000, etc or increases want input width adjust entire field visible.

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

the simple way use monospaced font, pre-calculate width of 1 character, add change handler on field dynamically set width depending on how many characters needs contain.

the harder way have change handler take value of text field, use create detached node display: none, insert dom, measure width, use value dynamically resize field.

here proof of concept on jsfiddle - http://jsfiddle.net/tonicboy/uvj6l/

js:

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