Complete inputShrink plugin

by Chris Nicholson

HTML

<html>
<head>

    <link href="test.css" type="text/css" rel="stylesheet" />

</head>
<body>

    <input />hello world


<script>


    $(document).ready(function () {

        //$('input').fillForm();

        $('input').inputShrink();

    });


    



</script>

</body>
</html>

CSS

input 
{
    width: 200px;
    padding: 5px;
    font-size: 20px;
}

JavaScript

(function ($) {
    $.fn.inputShrink = function (options) {

        var settings = {

        }
        $.extend(settings, options);

        $(this).each(function () {

            var input = $(this);
            input.wrap('<div>');

            var parent = $(input.parent('div'));
            parent.append('<div style="display: inline; visibility: hidden">asd</div>');

            var div = $(parent.children('div'));

            div.css({
                'font-family': input.css('font-family'),
                'font-size': input.css('font-size')
            });

            input.keyup(function () {
                div.text(input.val());
                if (div.width() > input.width()) { // add on the padding of the input box

                    var fontSize = input.css('font-size').replace('px', '');

                    input.css({
                        'width': input.width(),
                        'height': input.height(),
                        'font-size': fontSize - 2 + 'px'
                        
                    });
                }
            });
        });


    };
})(jQuery);