autoGrowInput

A lightweight jQuery plugin for making text input fields grow and shrink dynamically while typing.

Download   View on GitHub

Overview and Features

Released under the MIT License. Source on Github (changelog). Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. No dependencies except the jQuery library.

This plugin was developed by and for Pixabay.com - an international repository for free Public Domain images. It is based on a Stackoverflow answer by James Padolsey. We have implemented this piece of software in production and we share it - in the spirit of Pixabay - freely with others.

Usage

Include the JavaScript file jquery.auto-grow-input.min.js after loading the jQuery library. autoGrowInput accepts settings from an object of key/value pairs, and can be assigned to any text input field.

$(selector).autoGrowInput({key1: value1, key2: value2});

Settings

PropertyDefaultDescription
maxWidth500Maximum width of the input field. This value must either be an integer or a function that returns an integer. A function can be useful for responsive designs (example: source code of this demo).
minWidth20Minimum width of the input field.
comfortZone0Extra space after the last character in the input field. By default the width of one character is used.

Example

$('#my-input').autoGrowInput({ minWidth: 100, maxWidth: 600, comfortZone: 40 });

Manual Triggering

autoGrowInput may be triggered manually with the following event:

$('#my-input').trigger('autogrow');

This may be useful for responsive designs, when the input field is affected by an orientation change or on window resize.

Please report any bugs and issues at the GitHub repositiory.

This software is released as Open Source under the MIT License by Simon Steinberger / Pixabay.com.

About Us Blog More Goodies © Pixabay.com / Simon Steinberger / Hans Braxmeier