Change the font-size of an input if it's too long

by Calou

HTML

<form>
    <input>
    <div></div>
</form>

CSS

form > * {
    font-size: 22px
}

form > input {
    width: 150px;
    font-size: 18px;
}

form > div {
    position: absolute;
    left: -10000px;
}

JavaScript

var $form = $('form')
  , $input = $('input', $form)
  , $autoResize = $('div', $form)
  , $both = $input.add($autoResize)
  , fontSize = parseInt($input.css('font-size'), 10)

$input.on('keydown', function() {
    $autoResize.html(this.value.replace(/&/g, '&amp;')
                                .replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/ {2,}/g, function(spaces) {
                                    // Change the spaces to $nbsp; except the last one
                                    for (var i = 1, fakeSpaces = '', space; space = spaces[i++];) {
                                        fakeSpaces += '&nbsp;'
                                    }
                                    return fakeSpaces + ' '
                                })
                            )
    // We add 10px to be sure it doesn't stick to the edges
    if ($autoResize.outerWidth() >= $input.outerWidth() - 10) {
        do {
            $both.css('font-size', --fontSize)
        } while ($autoResize.outerWidth() >= $input.outerWidth() && fontSize > 10)
        // 10px is the smallest font-size accepted
        if (fontSize === 10) {
            $input.off('keydown')
        }
    }
})