Monday, February 6, 2012

Dynamic font-size on input-field

A collegue asked me today if he could automatically scale the font in an input-field to make the value fit, preferably as the user is typing. This would make things like long email adresses display in their entirety, instead of being chopped of (and potentially hard to spell-check for the user)


Simple enough, all you have to do is copy the current contents of the input-field into a float:ed div, measure it's rendered size at decreasing font-size until it fit's the input-field (or the font becomes too small). Once you find the appropriate font-size, update the input-fields font-size.

jQuery solution here: http://jsfiddle.net/CDHQS/