jQuery Auto Grow Plugin For Input Fields - input-autogrow

input-autogrow is a dead simple yet very useful jQuery plugin which automatically and horizontally expand the input fields as you type in.

See also:

• jQuery Plugin For Automatic Growing of Textareas - ns-autogrow
• jQuery Plugin For Auto Expandable Textarea - expandable
• Dynamic Textarea Resizing Plugin with jQuery - autosize

How to use it:

1. Add the jQuery input-autogrow plugin's script after you've loaded jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/input-autogrow.js"></script>

2. Call the function with default options on the target input field and done.

$('input').inputAutogrow();

3. Set the max/min width of your input field.

$('input').inputAutogrow({
  maxWidth: 600,
  minWidth: 100
});

4. Set the extra spacing at the end of the input which is used until the maxWidth is hit.

$('input').inputAutogrow({
  trailingSpace: 10
});

5. API methods.

/* trigger update manually */
$('input').trigger('autogrow');
/* or */
$('input').trigger('change');

/* destroy the plugin */
$('input').inputAutogrow('destroy');

Changelog:

v1.1.1  (2019-10-04)

• Fix initializing on input with value " "

v1.1.0  (2018-04-05)

• Breaking Change - Improve trailingSpace option to behave more generically
• Breaking Change - When inputAutogrow is already enabled on an input and inputAutogrow is called nothing will happen. Instead inputAutogrow('destroy') must be now be called first.
• Fix error when incorrectly attempted to parse options when the event was
• Fix bug during destroy action triggered

v1.0.3 (2018-03-30)

• Add qunit test suite. Run this using npm run test
• Fix bug during destroy action
• Fix error when incorrectly attempted to parse options when the event was triggered
• Breaking Change - Improve trailingSpace option to behave more generically

2018-03-28

• Fix options parsing bug, generalize trailingSpace option

2017-01-26

• v1.0

2016-09-02

• add change event as trigger

---

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