GrowField

A tiny, dependency-free JavaScript module for making textarea elements grow with their content.

Installation #

Manual Download #

Download dist/growfield.min.js and place the following HTML in your page’s head element:

<script type="text/javascript" src="dist/growfield.min.js"></script>

CDN (Courtesy of jsDelivr) #

Place the following HTML in your page’s head element (check to make sure the version in the URL is the version you want):

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fivefifteen/[email protected]/dist/growfield.min.js"></script>

NPM #

npm install growfield --save

// ES6
import growfield from 'growfield'

// CommonJS
const growfield = require('growfield')

Fetcher #

fetcher install fivefifteen/growfield --save

Bower #

bower install fivefifteen/growfield --save

Usage #

`growfield` Function #

growfield([selector], [options])

Initializes GrowField.

Parameters #

selector (Optional) – A query string for textareas that you would like to use growfield on.
options (Optional) – An object of options.

Examples #

window.addEventListener('load', function () {
  growfield()
})

Options #

{
  maxRows: null, // The maximum number of rows to grow the field to before normal scrolling happens
  minRows: null  // The minimum number of rows to start with (Defaults to 1)
}

Credit #

A special thanks to Rick Kukiela for posting this StackOverflow answer which is where the base code of this module came from.

License #

MIT. See the license file for more info.