|
|
/***
|
|
|
* Use like $('#input_box').autoGrowInput()
|
|
|
*/
|
|
|
(function($){
|
|
|
|
|
|
$.fn.autoGrowInput = function(o) {
|
|
|
|
|
|
o = $.extend({
|
|
|
maxWidth: 1000,
|
|
|
minWidth: 0,
|
|
|
comfortZone: 70
|
|
|
}, o);
|
|
|
|
|
|
this.filter('input:text').each(function(){
|
|
|
|
|
|
var minWidth = o.minWidth || $(this).width(),
|
|
|
val = '',
|
|
|
input = $(this),
|
|
|
testSubject = $('<tester/>').css({
|
|
|
position: 'absolute',
|
|
|
top: -9999,
|
|
|
left: -9999,
|
|
|
width: 'auto',
|
|
|
fontSize: input.css('fontSize'),
|
|
|
fontFamily: input.css('fontFamily'),
|
|
|
fontWeight: input.css('fontWeight'),
|
|
|
letterSpacing: input.css('letterSpacing'),
|
|
|
whiteSpace: 'nowrap'
|
|
|
}),
|
|
|
check = function() {
|
|
|
|
|
|
if (val === (val = input.val())) {return;}
|
|
|
|
|
|
// Enter new content into testSubject
|
|
|
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
|
|
|
testSubject.html(escaped);
|
|
|
|
|
|
// Calculate new width + whether to change
|
|
|
var testerWidth = testSubject.width(),
|
|
|
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
|
|
|
currentWidth = input.width(),
|
|
|
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|
|
|
|| (newWidth > minWidth && newWidth < o.maxWidth);
|
|
|
|
|
|
// Animate width
|
|
|
if (isValidWidthChange) {
|
|
|
input.width(newWidth);
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
testSubject.insertAfter(input);
|
|
|
|
|
|
$(this).bind('keyup keydown blur update', check);
|
|
|
|
|
|
});
|
|
|
|
|
|
return this;
|
|
|
|
|
|
};
|
|
|
|
|
|
})(jQuery);
|
|
|
|