Minimal Auto Growing Input Field Plugin For jQuery

autoGrowInput is a minimalist jQuery plugin which automatically adjusts the width of your input field while typing.

See also:

• Dynamic Textarea Resizing Plugin with jQuery - autosize

How to use it:

1. Import jQuery library and the jquery.auto-grow-input.js script at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="jquery.auto-grow-input.js"></script> 

2. Just call the plugin on the existing text input fields and we're done.

$(function(){
  $('input').autoGrowInput(});
});

3. All the default settings.

// Maximum width of the input field. 
// An integer or a function that returns an integer.
maxWidth: 500,

// Minimum width of the input field.
minWidth: 20, 

// Extra space after the last character in the input field.
comfortZone: 0

Change log:

2015-10-30

• Fixed: Bumpy ride when the input has property 'text-transform: uppercase'

2015-10-12

• Don't create an input element on each plugin invocation

2015-10-04

• Fixed: jQuery input:text selector ignores text based html5 inputs

2015-07-15

• Fixed: When using JSDOM, prop returns undefined and eventually throws "Cannot call method 'replace' of undefined"

2015-04-30

• Support placeholder

2015-04-18

• Fixed cannot set comfortZone: 0

---

This awesome jQuery plugin is developed by Pixabay. For more Advanced Usages, please check the demo page or visit the official website.