textarea-autosize

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

NPM

npm install textarea-autosize

Usage

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

<textarea class="js-auto-size" rows="1"></textarea>

<script type="module">
  import { TextareaAutoSize } from './textarea-autosize'
  const wrapper = new TextareaAutoSize(document.querySelector('textarea.js-auto-size'))
</script>

Minimum CSS Requirements

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.

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.

Updating Textarea Content

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.

wrapper.update()

Cleaning Up

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

wrapper.destroy()

Development

• Install Node.js v18+
• npm install
• npx playwright install
• npm test
• npm run start

Deploy New Release

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

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

Update GitHub Project Page

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