Resize input according to its content.

jquery.autofitinput.js

(function ($) {
    $.fn.autoFitInput = function (o) {
        function getTestSubject(input, text) {
            var testSubject = $('#input-tester');

            if (testSubject.length === 0){
                testSubject = $('<pre id="input-tester" />').appendTo('body').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    zIndex: -1,
                    width: 'auto',
                    whiteSpace: 'pre'
                });
            }

            if (!text) {
                text = '';
            }

            text = text.replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/\./g, 'l')
                    .replace(/ /g, '<span> </span>');

            testSubject.css({
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                textTransform: input.css('textTransform')
            }).html(text);

            return testSubject;
        }

        function fit() {
            var input = $(this);

            var minWidth = o.minWidth;

            var v = input.val() || '';

            var placeholder = input.attr('placeholder');
            var testSubject = getTestSubject(input, v);

            if (placeholder) {
                var pw = input.data('placeholder-width');

                if (!pw) {
                    pw = getTestSubject(input, placeholder).width();
                    input.data('placeholder-width', pw);
                }

                minWidth = Math.min(Math.max(minWidth, pw), o.maxWidth);
            }

            var fontSize = parseInt(input.css('fontSize').replace('px', ''), 10);

            v = v || placeholder;

            if (!v) {
                return;
            }

            v = v.replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/\./g, 'l')
                    .replace(/ /g, '<span> </span>');

            var width = testSubject.html(v).width();
            var w = Math.min(width, o.maxWidth);

            if (Math.max(minWidth, w) - input.width() === 0) {
                return;
            }

            input.width(Math.max(minWidth, (w+o.comfortZone)));
        }

        o = $.extend({
            maxWidth: 1000,
            minWidth: 0,
            comfortZone: 10
        }, o);

        this.filter('input:text').each(function () {
            var $$ = $(this);

            fit.call($$)

            $$.on('change blur focus input', fit);

        });

        return this;

    };

})(jQuery);