jQuery Auto Grow Plugin For Input Fields - input-autogrow

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:

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');

Change log:

2018-03-28

  • Fix options parsing bug, generalize trailingSpace option

2017-01-26

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.

  • Publication date: 28.03.2018
  • Source