Introducing a New jQuery Plugin… “Variable Input Size”

The “Variable Input Size” plugin simply resizes and input text box to fit it’s value. Useful for displaying fields to users in an easier to digest manner. This plugin was inspired by a post by 37 Signals where they implemented this idea in a new iteration of Highrise’s contact management page. I thought it was a great idea and wrote this as quick as I could. As described by 37 Signals:

Eventually, we explored the idea of dynamically sizing the fields. The now visible fields would shrink down to fit the name, making it read much more naturally. However, when you click the field to make a change, the field would expand to a larger size that would make it more comfortable to work inside. The text field then snaps back to size after the change.

You can find Variable Input Size on Github.

Demo

Sample Usage

Load the jQuery library and then on document load run the following.

$('input.variable').variable_input_size({default_size: 20});