jQuery Auto Grow Plugin For Input Fields - input-autogrow

jQuery Auto Grow Plugin For Input Fields - input-autogrow
File Size: 9.94 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.