Question

I’m using jQuery on this site, which has form inputs. I’d like one particular field to get longer (width) as the user enters data and space runs out.

How can I calculate when I ACTUALLY need to make the input (type="text") longer? What works for one browser may not work for all browsers.

Is this something that can’t be calculated, so everybody does it based on trial and error within each browser? Will I need to resort to this and tweak stretch values with a .keyup() that checks the value?.. EG..

$(".stretchInput").keyup( function(event) {
   var someValueAdjustedByTrialAndError = 30;
   var stretchPastLength = someValueAdjustedByTrialAndError;
   var stretchBy = 5;
   var baseWidth = 100;
   if ($(this).val().length > stretchPastLength ) {
      $(this).css('width',(baseWidth + ($(this).val().length - stretchPastLength ) * stretchBy ) + 'px');
   } else {
      $(this).css('width','');
   }
});

Answer 1

[UPDATED to detect backspace]

Place a hidden <span> element on the page, and within the keyup event of your <input> field you can mirror the input value in your span. Update the input field width to match your span.

Html:

<span style="display:none"></span>
<input type="text" style="width:100px"; />

Note the min-width value on the input element that is there to prevent the width from shrinking below a certain value.

jQuery:

$('input').keyup(function() {
    var $span = $('span');
    var $this = $(this);
    $span.text($this.val()); 
    $this.width($span.width());
});