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, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/ {2,}/g, function(spaces) { // Change the spaces to $nbsp; except the last one for (var i = 1, fakeSpaces = '', space; space = spaces[i++];) { fakeSpaces += ' ' } 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') } } })
<form> <input> <div></div> </form>
form > * { font-size: 22px } form > input { width: 150px; font-size: 18px; } form > div { position: absolute; left: -10000px; }