textarea-autosize

This package contains a TextareaAutoSize ES6 class for vertically adjusting a textarea based on user input and controlling any presentation in CSS. No clone or ghost elements are used. No jQuery dependency either, just plain vanilla JS. 😉

This was a fun project I started in Aug 2012 as a jQuery plugin. Nowadays, the same hack can be implemented using vanilla JS with such little code that I don't recommend using this package. Instead just implement the component code in your project so it can be modified to your requirements.

Installation

$3

``
npm install textarea-autosize
`

Usage

Import the script and find the desired textarea elements on which to initialize the component with.

`html



`

$3

In the following example, the minimum height is one line of text which is determined from the inherited font size, line height, and vertical padding. So if your font-size is 16px, line-height is 1.5, top/bottom padding is 6px each, then the minimum height would be 36px since 16 * 1.5 + 12 = 36.

`css
textarea {
box-sizing: border-box;
max-height: 160px; / optional but recommended /
min-height: 38px;
}
`

Increase the min-height to have more initial rows. Once text exceeds that minimum height the textarea will expand naturally until it reaches the maximum height if declared.

$3

If you pre-fill the textarea before page load the textarea will adjust to fit automatically but if given a value after page load (e.g. single page app) then you will need to trigger an update on the textarea after setting its value for it to size correctly.

`js
wrapper.update()
`

$3

Calling the destroy method will remove the event handler and release the element reference.

`js
wrapper.destroy()
`

Development

1. Install Node.js v18+
2. npm install
3. npx playwright install
4. npm test
5. npm run start

$3

Replace {type} with any of the following: patch, minor or major

`
npm version {type}
git push origin --tags
npm run predeploy && npm publish
`

$3

Run npm run deploy` to release on GitHub Pages using gh-pages package.

Resources

* https://github.com/theproductguy/BetterGrow
* https://github.com/cburgmer/jquery-shiftenter