textfieldAutosize

fits textfield input to the text as you type. jquery plugin.

by Terry King

HTML

<input name="textfield" type="text" class="inpstyle" id="textfield" />

CSS

.inpstyle{
	font-family: Arial;
	font-size: 18px;
	border: 1px solid #000;
}

JavaScript

$.fn.textfieldAutosize = function(o){
		
		o = $.extend({
			maxWidth: 1000,
			minWidth: 10,
			margin: 10
		}, o);
		
		$(this).after('<span style="font-family:'+$(this).css('font-family')+';font-size:'+$(this).css('font-size')+';display:none;"></span>');
		$(this).on('input',function(){
      var text=$(this).val().replace(/ /g, "&nbsp;");
			$(this).next().html(text);
			var w=$(this).next().width()+o.margin;
			$(this).width(Math.min(Math.max(w,o.minWidth),o.maxWidth));
		});
		$(this).trigger('input');
		
	};

$('#textfield').textfieldAutosize();