Minimal Auto Growing Input Field Plugin For jQuery

Minimal Auto Growing Input Field Plugin For jQuery
File Size: 7.43 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

See also:

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.